Introdução
O recurso @font-face do CSS3 nos permite usar famílias tipográficas personalizadas na Web de forma acessível, manipulável e escalonável. Mas, você pode dizer: "Por que usaríamos @font-face se tivéssemos Cufon, sIFR e usar texto em imagens?" Alguns benefícios de usar o @font-face para fontes personalizadas:
- Capacidade de pesquisa completa por localização (
ctrl-F) - Acessibilidade a tecnologias assistivas, como leitores de tela
- O texto pode ser traduzido usando serviços de tradução no navegador ou de tradução
- O CSS tem total capacidade de ajuste da exibição tipográfica:
line-height,letter-spacing,text-shadow,text-aligne seletores como::first-lettere::first-line
A essência do @font-face
De forma mais básica, declaramos uma nova fonte remota personalizada a ser usada da seguinte forma:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
Em seguida, coloque-o em uso:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
Nesta declaração @font-face, estamos usando a propriedade font-family para nomear explicitamente a fonte. Pode ser qualquer coisa, independente do nome da fonte. font-family: 'SuperDuperComicSans'; funcionaria bem, mas talvez não para sua reputação. Na propriedade src, indicamos onde o navegador pode encontrar o recurso de fonte. Dependendo do navegador, alguns tipos de fonte válidos são eot, ttf, otf, svg ou um URI de dados que incorpora todos os dados da fonte inline.
| otf e ttf | svg | woff | Eot | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5 ou superior | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Google Chrome 4 | Google Chrome 0.3 | Google Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| Ópera | Opera 10,00 | Opera 9 | ||
| iOS | No iOS 1 | |||
| Android | 2,2 |
É claro que nada é tão simples quanto deveria ser. A limitação inicial do código acima era que ele não veiculava um EOT para o IE 6-8. A sintaxe à prova de marcadores @font-face propôs uma maneira de resolver isso. Segue uma versão robusta.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
Já está induzindo uma dor de cabeça? Se você preferir começar logo, acesse o gerador de Font Squirrel, uma ferramenta que simplifica todo o processo para você, com sua fonte e preparando suas variantes e CSS para você. Isso é indispensável para colocar as webfonts em prática hoje em dia.
Suporte para dispositivos móveis?
O Safari para dispositivos móveis é compatível com fontes da Web SVG a partir do iOS 3.1 e o Android é compatível com otf/ttf a partir da versão 2.2. Mas será que os usuários de dispositivos móveis devem aproveitar essa experiência tipográfica aprimorada? Eu recomendaria não. O principal motivo é a forma como o WebKit lida com o texto que está aguardando uma fonte personalizada via @font-face: o texto é invisível. Portanto, em uma conexão móvel com baixa largura de banda, os usuários não verão nenhum texto até que cerca de 50.000 dados da fonte sejam carregados. A equipe do Webkit está buscando uma solução para ativar uma fonte substituta depois de alguns segundos, mas até que isso aconteça, não considero justo sujeitar os usuários a esses obstáculos entre eles e seu conteúdo.
Serviços de webfont
Vários serviços unem o recurso @font-face em uma API simples, muitas vezes permitindo adicionar uma única linha CSS ou script ao HTML e algumas configurações e pronto. Muitos deles, como WebInk, Typekit e Fontslive, permitem o uso das fontes (às vezes até um limite de largura de banda) por uma taxa mensal. O uso desses serviços é muito conveniente para o desenvolvedor casual, tirando algumas das complicações de servir uma solução multinavegadores
A API Google Font permite que você use um conjunto pequeno e selecionado de fontes licenciadas livremente vinculando a uma folha de estilo e permitindo que o Google lide com as questões de desempenho entre navegadores e do desempenho. É a maneira mais rápida de começar a trabalhar com webfonts.
Buscando fontes profissionais para @font-face
Uma surpresa comum para designers é que só porque você compra uma licença de fonte (para uso no design gráfico, por exemplo), não significa que ela pode ser usada em @font-face. Licenças para @font-face (ou incorporação na Web) geralmente são vendidas separadamente. Leia o contrato com atenção e sinta-se à vontade para entrar em contato com a fundação de fontes se tiver dúvidas. A Fontspring é uma boutique de fontes que vende centenas de fontes profissionais de qualidade, todas liberadas para uso com o perfil @font-face. A FontFont e outras fundações começaram a vender licenças do @font-face diretamente. No momento, elas segmentam apenas o WOFF e o EOT, o que exclui uma parte considerável (mas em redução) do mercado de navegadores. Muitas fundidas estão adicionando licenças de webfonts ao catálogo, mas se você não conseguir encontrar uma para a família tipográfica escolhida, entre em contato com eles para perguntar.
Como lidar com FOUT
O Flash de texto sem estilo é um fenômeno no Firefox e no Opera que poucos web designers gostam. Ao aplicar uma família tipográfica personalizada usando @font-face, durante o carregamento da página, a fonte ainda não foi transferida por download e aplicada, e a próxima fonte na pilha font-family é usada. Isso causa um flash de uma fonte diferente (normalmente menos bonita), antes que ela seja atualizada.
Com a API Google Font está o WebFont Loader, uma biblioteca JavaScript que busca fornecer vários ganchos de evento, oferecendo muito controle sobre o carregamento. Vamos dar uma olhada em como é possível fazer com que outros navegadores simulem o comportamento do WebKit de ocultar o texto substituto enquanto a fonte @font-face é carregada.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
Se o JavaScript estiver desativado, o texto permanecerá visível o tempo todo e, se houver algum erro de fonte, ele voltará para uma serifa básica com segurança. Considere isso como uma medida temporária. A maioria dos especialistas em webfonts quer ocultar o texto substituto por dois a cinco segundos e depois revelá-lo. Baixa largura de banda e dispositivos móveis são beneficiados com esse tempo limite. É compreensível que o Mozilla esteja tentando corrigir isso em breve.
Uma solução mais leve, mas menos eficaz, é a propriedade font-size-adjust, atualmente compatível apenas com o Firefox. Ela oferece uma oportunidade de normalizar x-height em uma pilha de fontes, reduzindo a quantidade de mudanças visíveis na FOUT. Na verdade, o gerador de Font Squirrel acaba de adicionar um recurso que informa a proporção x-height das fontes enviadas, para que você possa definir com precisão o valor font-size-adjust.
Resumo
As Webfonts oferecem bastante liberdade para designers e, com os novos recursos, como ligações discricionárias e alternativas de estilo, elas terão muito mais flexibilidade. Por enquanto, você pode se sentir confiante para implementar essa parte do CSS3, já que ela abrange 98% dos navegadores implantados. Aproveite!