Há alguns meses o Google lançou um projeto que tinha como objetivo mudar a nossa velha idéia sobre “fontes de sistema”, aquelas que você pode usar com segurança em seu site. Mas é claro que não poderíamos viver para todo o sempre dizendo para os designers: “Você não pode usar a ‘Futura’ nos títulos, vamos ter que mudar para ‘Arial’”. Vimos com o passar dos anos, nascerem vários projetos nesta mesma linha… usando de diferentes estratégias para alcançar este objetivo. De acordo com as tecnologias, podemos destacar os seguintes:

sFIR – Flash Replacement

Este foi o primeiro que eu conheci. A estratégia do sFIR é utilizar objetos flash para renderizar as fontes, usando uma combinação de CSS, Javascript e FLASH. Basicamente, o JavaScript detecta as configurações do texto que será subistituído e repassa essas informações para o flash que se encarrega de desenhar o texto como descrito no CSS, e então o texto é subistituído pelo flash.

Cufón –  JavaScript Generator

O Cufón tem sido largamente usado como alternativa ao sFIR. Como não usa FLASH, mantendo assim o HTML intacto, ele não gera ruídos para os motores de busca, facilitando sua receptividade pelos mais neurados adeptos de SEO. Ele tem duas partes bem distintas: o “Font Generator”, que converte fontes para um formato proprietário (uma espécie de mapa de coordenadas para desenhar cada símbolo) e um motor de renderização escrito em JavaScript.

FaceLift – Image Replacement

A terceira opção pode ser usar o FaceLift, que nada mais é do que um um script de para criação de imagens, que geradas dinamicamente com todas as características do texto são inseridas no corpo da página no lugar do texto. É muito interessante, pois podemos subistituir várias tags do HTML por estas imagens.

Se você não conhecia uma destas opções, aconselho ler um pouco sobre cada uma delas… todas possuem prós e contras, e se encaixam bem em diferentes cenários. Já estou há algum tempo pensando em escrever sobre este assunto e talvez volte a falar especificamente sobre cada uma delas. De qualquer forma, vamos ao que interessa… a crista da onda do momento: o Google Font Directory.

O que é o Google Font Directory?

Para ser direto, é uma API do Google que vai ajudar você a adicionar textos de fontes “incomuns” a qualquer página web. Exatamente como todos os outros projetos. A grande diferença é a facilidade com que conseguimos este objetivo.

Vamos ver um exemplo rápido:

Queremos usar os textos de título (<h1>) do nosso site com uma fonte diferente, para seguir a risca o visual que foi passado pelo designer, então precisamos apenas importar a fonte que vamos usar do Google Font Directory. Neste caso vamos usar a fonte: “Reenie Beanie”.

Funciona da seguinte maneira, nós vamos ao Google Font Directory e procuramos pela fonte que queremos, ao encontrar, clique em “Get Code”. Daí você verá um link de import de CSS.

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin'
rel='stylesheet' type='text/css'>

Daí para utilizar, é só adicionar no seu HTML e usar livremente em seu CSS através do ‘font-family’:

h1 {
font-family: 'Reenie Beanie', arial, serif;
}

E então temos o seguinte resultado:

exemplo-google-font

Fiquei muito contente com esta iniciativa do Google, pois me parece ser muito promissora. Acho que a lista de fontes disponíveis ainda é muito pequena, mas já amplia, e muito, as possibilidades de criação do designer.

Como viram, com apenas algumas poucas linhas de código e sem usar nenhum javascript, fizemos o browser carregar a fonte que está hospedada no Google. Não cheguei a testar em todos os browsers (fiquem a vontade para fazê-lo) e me dêem feedback, mas o Google promete ser compatível com praticamente todos os browsers, inclusive o famigerado Internet Explorer 6.

Mais uma vez parabéns ao Google pela inciativa.

Veja o exemplo funcionando.