Buscar inspiração, desenhar, arquitetar a informação, fazer o recorte e por fim morrer em 5 ou 6 fontes. Uma frustração que não vem de hoje. Uma solução é recorrer ao Flash. Vamos mostrar algumas soluções e técnicas que permitem usar outras fontes em seu site, garantindo que seus visitantes vão viualiza-las. Todas gratuitas 
sIRF
Bastante conhecida, desenvolvida por Mike Davidson e Mark Wubben, sIRF (Scalable Inman Flash Replacement) usa javascript para indentificar se o usuário tem o flash plugin instalado (se não tiver, exibe uma fonte comum) e flash para substituir o texto pela fonte personalizada.
Além de ser bastante compatível (IE5+, Safari, Firefox, Opera7+) não há prejuízo na acessibilidade e não prejudica as técnicas de SEO já que o código não é alterado. Veja um exemplo.
Como funciona
A primeira coisa, é baixar a última versão no site da documentação. Eu usei a versão 3 r436, a versão 2 não abre no Flash CS4 e você vai precisar pelo menos da versão 8 Pro (ou superior).
Flash: Abra o arquivo sifr.fla (pasta flash) e edite o MovieClip principal (identificado como holder), remova o texto padrão e configure os atributos da fonte (bold, italic e regular, sublinhado não). Selecione a fonte e os caracteres extras em Charactere Embidding (acentos, pontuação). Exporte o filme pra swf configurando os seguintes parâmetros:
- Flash 8 (AS2),
- Load Order para BottomUp
- Protect the movie from import
- Compress Movie
HTML: Faça as chamadas para o CSS e Javascript do sIFR
<link rel="stylesheet" href="sIFR/sifr.css" type="text/css"> <script src="sIFR/sifr.js" type="text/javascript"></script> <script src="sIFR/sifr-config.js" type="text/javascript"></script>
Abra na pasta js, o arquivo sifr-config.js e:
- Configure o caminho do swf exportado
- Ative o objeto
- Diga quem você quer substituir (e por quem)
var fonteVirtual = { src: '../sifr3-r436/flash/sifr.swf', transparent: true }; sIFR.activate(fonteVirtual); sIFR.replace(fonteVirtual, { selector: 'h1', css: '.sIFR-root { background-color: #F9F9F9; color: #FF0000; }' });
Claro que você tem muitas outras opções para configurar, veja aqui.
CSS: Agora basta configurar a classe referente ao sIFR
.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; }
Apartir de agora atodo elemento h1 será substituída pela fonte configurada.
Realizando alguns testes, o custo disso será o seguinte:
- sifr.css (1kb)
- sifr.js (28kb)
- sifr-config.js (1kb)
- sifr.swf (8kb)
38kb no total e alguns arquivos podem variar.
FontBurner
Fontburner é open-source e utiliza sIFR, mas sua implementação é bem mais simples. Dispensa o Flash, configuração de javascript e css, conversão de fonte. Não prejudica o site nas ferramentas de busca.
Como funciona
Praticamente todos os recursos ficam no servidor do FontBurner e o que você precisa fazer é apenas escolher a sua fonte no repositório do site e colar o código gerado em sua página.
Por padrão, elementos H[1...6] já aparecem com a fonte substituída. Mas outros elementos também podem ser alterados atribuindo à classe css do ememento o nome da fonte. Ex,:
<span class="babelsans_bold" style="font-size:11px;">Forcei a barra com esse span que também usa a fonte BabelSans</span>
Com FontBurner você deve escolher entra as mais de 1000 fontes disponíveis no site que fornece também um plugin para wordpress e o próprio arquivo .swf pra usar com o sIFR se necessário.
TypefaceJS
TypefaceJS é uma biblioteca javascript open-source, cross-browser (Firefox 1.5+, Safari 2+ e Internet Explorer 6+) . Utiliza o recursos do próprio navegador para desenho de vetor (<canvas> e SVG para Firefox, Safari e Opera e VML para IE). Aceita seleção de texto e copiar-colar.
Como funciona
Converta a fonte escolhida (OpenType ou TrueType) para o formato typeface javascript. Nele está as coordenadas do desenho da fonte. Use o próprio conversor do site.
Em seguida, importe a biblioteca do typeface e o script da fonte convertida, nesta sequência. Se houver uma folha de estilo, deve vir antes dos scripts.
<link rel="stylesheet" type="text/css" href="css/estilo.css"> <script src="js/typeface-0.13.js"></script> <script src="js/gentilis_bold.typeface.js"></script>
Aplique a classe typeface-js nos elementos que deseja aplicar a fonte. Recomendo que procure aplicar apenas em título já que existe uma tempo de processamento.
Limitações
TypefaceJS funcionou muito bem. A sua biblioteca nem é tão pesada (25kb na versão 0.13). Os scripts convertidos variam de acordo com a fonte escolhida. O problema encontrado foi durante a conversão das fontes. O conversor online, respeita os direitos de distribuição das fontes identificando e bloqueando se preciso. Se a fonte escolhida não se enquadrar, esqueça. Talvez haja uma solução aqui.
Cufón
Consiste em duas partes, o gerador e sua renderização por javascript. Cufón é uma mistura de SVG, VML, JSON. Dispõe de cache pra acelerar a renderização da fonte. O arquivo da fonte convertido pra javscript é bem pequeno, de um teste que fiz deu 15kb e sua biblioteca principal 18kb (versão comprimida). Sua API bem documentada e cheio de exemplos
Como funciona
Use o generator do Cufón pra adquirir a versão SVG/JS da fonte. Faça o download da última versão da biblioteca e coloque os dois (ou mais, se houver outra fonte) script na sua página e use o comando Cufon.replace para apontar o elemento que irá receber a fonte. O parâmetro também pode ser uma querie de bibliotecas JS como Prototype, JQuery.
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="wanta_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>Facelift
“Uma alternativa ao sIFR”. Esse é o slogan do FLIR (Facelift Image Replacement). Funciona com PHP com a biblioteca GD (para criação de imagens) gerando imagens dinamicamente.
Como funciona
A primeira coisa a fazer (depois de efetuar o download, claro!) é configurar o arquivo config-flir.php. Diretórios, fontes, cache entre outros parâmetros. Elementos h1…h5 já são aplicados automaticamente pela função js FLIR.auto(). Importando o javascript (33kb) e definindo os elementos que serão substituídos, a nova fonte já será aplicada. Também é possível usar queries para elementos mais específicos
<script language="javascript" src="/path-to/facelift/flir.js"></script>
<script type="text/javascript">
FLIR.init( { path: '/path-to/facelift/' } );
// automatico para h1 e h3.special
FLIR.auto( [ 'h1', 'h3.special'] );
// O emelento H3 terá uma fonte 'tribal'
FLIR.replace( 'h3' , new FLIRStyle({ cFont:'tribal' }) );
</script>A documentaçao deixa a desejar, mas os parâmetros do config-flir.php e pelos exemplos vai tranquilo.
Como grande parte do processamento fica por conta do PHP, há uma certa demora que pode causar um comportamento estranho mas o cache ta pra tentar resolver. O interessante é que há mais flexibilidade nas conversões de fontes, além de ser mais fácil substituí-las.
Mais
- Web Typography: Font Embedding Services
- Rich Typography On The Web: Techniques and Tools
- Arquivos de exemplo
Tags: Javascript, Tipografia
Sobre o autor:
Graduado em Desenvolvimento de Sistemas, Pós-graduando em Design de Interação pelo Instituto Faber-Ludens. Programador PHP desde 2000. Desenvolve projetos em: Ruby on Rails, Flex, Wordpress, Symfony entre outros. Mais informações no LinkedIn. Siga-me no Twitter.
