Guia rápido de fontes da Web via @font-face

Paul Irish

Introdução

O recurso @font-face do CSS3 permite usar tipos de letra personalizados na Web de maneira acessível, manipulável e escalonável. Mas você pode perguntar: "Por que usar @font-face se temos Cufon, sIFR e texto em imagens?" Alguns benefícios de usar @font-face para fontes personalizadas:

• Capacidade de pesquisa completa pelo recurso Encontrar (ctrl-F)
• Acessibilidade a tecnologias adaptativas, como leitores de tela
• O texto é traduzível, seja por tradução no navegador ou por serviços de tradução
• O CSS tem capacidade total de ajustar a exibição tipográfica: line-height, letter-spacing, text-shadow, text-align e seletores como ::first-letter e ::first-line

@font-face em essência

No nível mais básico, declaramos uma nova fonte remota personalizada para ser usada assim:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Em seguida, coloque em prática:

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 fontes válidos são eot, ttf, otf, svg ou um URI de dados que incorpora todos os dados da fonte inline.

Claro, nada é tão simples quanto deveria ser. A limitação inicial do código acima era que ele não exibia uma EOT para o IE 6-8. A sintaxe @font-face à prova de falhas propôs uma maneira de resolver isso. Uma versão robusta segue abaixo.

@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á com dor de cabeça? Se você preferir começar rapidamente, acesse o gerador do Font Squirrel, uma ferramenta que simplifica todo o processo, usando sua fonte e preparando as variantes e o CSS. É indispensável para colocar fontes da Web em prática hoje.

Suporte para dispositivos móveis?

O Safari para dispositivos móveis oferece suporte a fontes da Web SVG a partir do iOS 3.1, e o Android oferece suporte a otf/ttf a partir da versão 2.2. Mas será que os usuários de dispositivos móveis precisam dessa experiência tipográfica aprimorada? Não recomendo. O motivo principal é a forma como o WebKit processa o texto que está aguardando uma fonte personalizada pelo @font-face: o texto fica invisível. Portanto, em uma conexão móvel de baixa largura de banda, os usuários não vão ver nenhum texto até que os dados da fonte de cerca de 50 mil sejam carregados. A equipe do Webkit está buscando uma solução para ativar uma fonte de fallback após alguns segundos, mas, até que isso aconteça, não considero justo sujeitar seus usuários a esses obstáculos entre eles e seu conteúdo.

Serviços de webfont

Vários serviços agrupam o recurso @font-face em uma API fácil, muitas vezes permitindo que você adicione uma única linha de script ou CSS ao HTML e faça algumas configurações. Muitas, como WebInk, Typekit e Fontslive, permitem que você use as 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, pois ele não precisa lidar com algumas das complicações de exibição de uma solução para vários navegadores.

A API Google Fonts permite usar um conjunto pequeno e selecionado de fontes licenciadas sem custo financeiro apenas vinculando uma folha de estilo e deixando que o Google lide com as questões de desempenho e compatibilidade entre navegadores. É a maneira mais rápida de começar a usar fontes da Web.

Como encontrar famílias tipográficas profissionais para @font-face

Uma surpresa comum para designers é que, só porque você compra uma licença de fonte (para usar no design gráfico, por exemplo), não significa que pode usá-la em @font-face. As licenças para @font-face (ou incorporação na Web) geralmente são vendidas separadamente. Leia o contrato com atenção e entre em contato com a fundição de fontes se tiver dúvidas. A Fontspring é uma boutique de fontes que vende centenas de fontes profissionais de qualidade, todas aprovadas para uso com @font-face. A FontFont e outras fundições começaram a vender licenças @font-face diretamente, embora atualmente apenas para WOFF e EOT, o que deixa de fora uma parte considerável (mas em declínio) do mercado de navegadores. Muitas fundições estão adicionando licenças de fontes da Web ao catálogo, mas se você não encontrar uma para o tipo de letra escolhido, entre em contato com elas para perguntar.

Como lidar com FOUT

O Flash de texto sem estilo é um fenômeno no Firefox e no Opera que poucos designers da Web gostam. Ao aplicar um tipo de letra personalizado usando @font-face, há um breve momento, ao carregar a página, em que a fonte ainda não foi baixada e aplicada, e a próxima fonte na pilha font-family é usada. Isso causa um flash de uma fonte diferente (geralmente menos bonita) antes de ser atualizada.

Acompanhando a API de fontes do Google está o WebFont Loader, uma biblioteca javascript com o objetivo de fornecer uma série de ganchos de eventos, proporcionando muito controle sobre o carregamento. Vamos conferir como fazer com que outros navegadores imitem o comportamento do WebKit de ocultar o texto alternativo 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 vai permanecer visível o tempo todo. Se a fonte apresentar erros, ela vai voltar para uma serif básica com segurança. Considere isso uma medida provisória por enquanto. A maioria dos especialistas em webfonts quer ocultar o texto alternativo por dois a cinco segundos e depois revelá-lo. Dispositivos móveis e de baixa largura de banda se beneficiam muito desse tempo limite. A Mozilla está tentando corrigir isso em breve.

Uma solução mais leve, mas menos eficaz, é a propriedade font-size-adjust, que atualmente só é compatível com o Firefox. Isso dá a oportunidade de normalizar a x-height em uma pilha de fontes, reduzindo a quantidade de mudanças visíveis no FOUT. Na verdade, o gerador do Font Squirrel acabou de adicionar um recurso que informa a proporção de altura x das fontes enviadas para que você possa definir com precisão o valor de font-size-adjust.

Resumo

As fontes da Web oferecem bastante liberdade aos designers, e com os próximos recursos, como ligaduras opcionais e alternativas estilísticas, eles terão muito mais flexibilidade. Por enquanto, você pode implementar essa parte do CSS3 com confiança, já que ela abrange 98% dos navegadores implantados. Aproveite!