Todo webdesigner sabe a frustração que é trabalhar com tipografia para web. Estamos limitados a um rol mÃnimo de fontes comuns à grande parte dos computadores do mundo, e temos que lidar com elas para uma série de situações diversas. É comum recebermos layouts produzidos em alguma agência externa, por algum designer sem conhecimento técnico de webdesign, e ficarmos então com o abacaxi de usar a tipografia escolhida por esse designer, o que nem sempre é viável de fazer.
Hoje em dia é possÃvel usar em uma boa quantidade de browsers a propriedade @font-face, que permite que o a página carregue um arquivo de fonte e o renderize no browser, sem necessitar que o usuário possua a fonte em seu computador. O problema é que essa é uma propriedade do CSS2 e CSS3, e não está plenamente implementada nos principais navegadores… Por isso já existe por aà uma série de ferramentas de font-replacement, que substituem o texto escrito por alguma imagem ou arquivo em flash.
Em um post anterior, eu falei sobre o sIFR, uma dessas soluções. Hoje vou falar do FontJazz, que descobri via Armando Fontes, do www.designgrafico.art.br.
O FontJazz é um script que converte as tags determinadas pelo designer em textos formados por imagens. Ele lê o texto da tag e o remonta utilizando CSS sprites, uma técnica que consiste em colocar as imagens de um site todas em um único arquivo de imagem, e utilizar o atributo background-position para dar as coordenadas de uma imagem especÃfica dentro desse arquivo e mostrar apenas essa imagem (sprite) como background do elemento. No caso, os sprites são as letras da fonte. Isso permite que o usuário visualize virtualmente qualquer fonte. Veja o exemplo abaixo:
Headlines sem FontJazz
Headings com FontJazz em ação
Com o FontJazz funcionando, o navegador então passou a mostrar os headings com fontes que eu determinei, no caso, Toonish Regular e Context Rounded Black, fontes que estão fora da lista de fontes seguras para web.
Como funciona o FontJazz?
Basicamente, o que o FontJazz faz é transformar o texto e as tags que você determinar em um conjunto de outras tags. Esse conjunto de tags fica dentro de uma div que corresponde ao texto inteiro da tag original. Dentro dessa div há ainda outras divs que correspondem a cada uma das palavras do texto, e dentro dessas divs há ainda vários spans, cada um correspondendo a uma letra da palavra em questão. Todas essas spans têm um mesmo background, uma imagem que contém todas as letras da fonte, mas, por causa da propriedade background-position, cada span deixa à mostra apenas a letra à qual corresponde.
Exemplo de estrutura resultante da conversão de uma tag pelo FontJazz. Note a presença de um span hidden que contém o texto original da tag, o que permite que ele seja lido por navegadores para cegos
Para essa conversão funcionar, basicamente você precisa de três arquivos que serão referenciados no HTML da página: sua fonte convertida em uma imagem com todos glifos da fonte, um javascript que contém todas as coordenadas de cada glifo nessa imagem, e, claro o javascript do FontJazz, que faz rodar a ferramenta. Você consegue todos esses arquivos ao clicar em “Jazz a Font!” no menu principal do site do FontJazz. A conversão da fonte (que pode ser Open ou True Type) é feita no próprio site.
Configurações de conversão de fontes no FontJazz
Após a conversão, você é levado a uma página onde pode baixar todos os arquivos mencionados. Sua fonte é convertida em uma imagem, que pode ter a cor de fundo que desejar ou fundo nenhum, no formato PNG. Você também baixa o arquivo com as coordenadas, que é gerado automaticamente.
Configurando sua página com o FontJazz
A estrutura básica que sua página deve seguir é a seguinte:
<html>
<head>
<title>Buenas!</title>
<script type="text/javascript" src="fontjazz.js"></script>
<script type="text/javascript" src="font.js"></script>
</head>
<body>
<h1>H1 com Fontjazz funcionando!</h1>
<h2>Teste de headline 2</h2>
<p>Se está funcionando, o texto acima deve ser roxo e usar a fonte Toonish.</p>
<script type="text/javascript">
FontJazz.apply("h1", "font");
</script>
</body>
</html>
Como se pode ver, o arquivo-chave e as coordenadas da font são carregadas na head. No final do documento, antes do fechamento da tag body, você deve fazer rodar a função FontJazz.apply(), colocando dois parâmetros: 1) a tag que será substituÃda e 2) o nome da fonte que deverá ser usada. Por padrão, o arquivo da fonte tem o nome de font.gif (ou font.png) e o javascript tem o nome de font.js. Se você quiser usar mais de uma fonte e precisar diferenciar uma da outra, abra o arquivo font.js de cada uma, e troque a palavra “font” pelo nome desejado nas seguintes linhas:
FontJazz.register('font', {
image: 'font.png',
Não esqueça de trocar também o nome da imagem!
Veja abaixo um exemplo de HTML utilizando duas fontes convertidas pelo FontJazz, o mesmo que gerou o exemplo no começo deste post.
<html>
<head>
<title>Buenas!</title>
<script type="text/javascript" src="fontjazz.js"></script>
<script type="text/javascript" src="toonish.js"></script>
<script type="text/javascript" src="context.js"></script>
</head>
<body>
<h1>H1 com Fontjazz funcionando!</h1>
<h2>Teste de headline 2</h2>
<p>Se está funcionando, o texto acima deve ser roxo e usar a fonte Toonish.</p>
<script type="text/javascript">
FontJazz.apply("h1", "toonish");
FontJazz.apply("h2", "context");
</script>
</body>
</html>
Vantagens e desvantagens do FontJazz
Bom, depois de mostrar como funciona a ferramenta, vamos ao que interessa: o que ela tem de bom e o que ela tem de ruim?
Começando pelas desvantagens, posso citar duas principais:
- Algumas fontes não são muito bem convertidas e acabam ficando com problema de letter-spacing (e não há suporte para kerning). o exemplo abaixo ilustra bem isso:
Problema de espaçamento entre as letras
Tentei solucionar esse problema editando os estilos das spans de cada letra, aplicando margens horizontais. Isso não solucionou o problema, porque as divs de cada palavra têm largura fixa determinada pelo script, e as letras acabaram quebrando linha, como se vê abaixo.
Quebra de linha de cada palavra com o aumento da margem dos spans
É possÃvel editar as coordenadas de cada letra no script, mas isso seria dispendioso demais, não vale a pena a não ser para pequenos ajustes.
- Os estilos CSS aplicados à s tags originais se perdem quando ela é convertida, valendo então as configurações determinadas na hora da conversão da fonte. Isso faz com que você tenha que converter novamente a fonte sempre que quiser fazer algum ajuste, então é melhor ter certeza do que você quer antes de fazer a conversão. Ainda bem que cada div resultante tem uma classe com o nome da fonte (FontJazz-nomedafonte), que pode ter alguns estilos atribuÃdos, como margens, paddings, etc.
Quanto às vantagens, cito as seguintes:
- Testei o script nos seguintes navegadores: IE6+, Firefox2+, Opera e Safari e ele rodou bem em TODOS. É crossbrowser garantido
. O único problema é o IE6, que não processa a transparência do PNG sozinho, então necessita de hacks, mas isso não é culpa do FontJazz. - Caso o usuário esteja com o javascript desligado, ou utilize algum browser que não suporte javascript, não há problema, pois as tags originais ainda aparecem e podem ser lidas. Por isso, sempre crie estilos para essas tags, para que não fique com um tags totalmente sem coerência com o layout.
- O script é bastante simples e parece ser de processamento muito leve.
- Quando olhei a quantidade de tags resultantes da conversão fiquei bastante preocupado, afinal, elas acabam com a semântica do HTML original, o que pode prejudicar a SEO das páginas. Ingenuamente, fui perguntar ao autor do FontJazz, Rasmus Schultz, se sua ferramenta era “SEO Friendly”. Ele me respondeu em poucas horas, muito prestativamente:
It should be very search engine friendly – you’re looking at the source on the client-side, which, yes, is not search engine friendly at all. But the source code as google and other robots see it, is simply the <h1> tag, which is precisely what you want them to see – robots don’t know or care about client-side document transformations, and FontJazz is 100% client-side with no server-side dependencies or transformations.
O que ele disse é que o FontJazz faz a conversão das tags do documento apenas no lado do usuário, no browser de quem está visualizando a página. O documento original que fica no servidor, que é o que interessa aos robôs de busca, mantém suas tags originais e continua sendo tão SEO friendly quanto quando você fez o upload.
Depois que fiz esta pergunta a ele, ele gentilmente incluiu essa dúvida no FAQ do FontJazz. Lá também se pode ver sua declaração de que a ferramenta não suporta kerning e que talvez vá suportar em uma segunda versão, mas que não há planos ainda para essa segunda versão.
Pra concluir:
O FontJazz não é a panacéia do font-replacement, mas é uma solução bem simples, estável e fácil de implementar. Bom, eu recomendo!
Tags: Novidades, SEO, Web, Webdesign, Webstandards
email/gtalk: 
skype: neovalk
twitter:
Eu estava montando o proximo layout do meu site, e tive problemas com caracteres com acento e cedilhas, mesmo tendo criado esses caracteres lá no menu de conversao…
Teve o mesmo problema?
http://www.fotographica.com.br
Como te respondi por e-mail:
Bom, acabei de fazer um teste com uma fonte bem convencional, Garamond, e adicionei “á é ê”. No preview elas não aparecem, porque o texto utilizado é em inglês, mas quando tu baixas a imagem, ela mostra lá os sinais de acentuação.
Será que não estás utilizando uma fonte que não tem os acentos, ou cujas letras acentuadas estão configuradas para outros botões do teclado?