Web Fonts

Nas versões mais recentes dos browsers (incluindo IE9) surgiu um novo formato WOFF (Web Open Font Format), com especificação candidata no W3C e  que inclui um wrapper para fontes TrueType e OpenType, e compressão (na web é importante que os recursos sejam o mais leves possível). O intuito sendo o de promover um standard que todos adotem.

Google Web Fonts

Google Web Fonts

A Google produziu uma ferramenta para facilitar a pesquisa e introdução de web fonts nas nossas páginas, mas uma rápida inspeção que fiz ao código gerado por eles deparei-me com algumas limitações. Reparei que algumas fontes fornecidas por essa ferramenta são apenas no formato .woff ou .ttf. O problema é que isso é um bocado limitado e podemos fazer mais que isso para ter-mos maior suporte.

Vamos ver então o suporte atual para fontes nos browsers:

• IE4+ EOT IE9+ WOFF
• Safari 3.1+ TrueType/OpenType
• Firefox 3.5+ TrueType/OpenType 3.6+ WOFF
• Opera 10+ TrueType/OpenType
• Chrome 4+ TrueType/OpenType WOFF

E outras plataformas?

Por exemplo o iOS no início suportava TrueType/OpenType, mas já não suporta isso em favor do SVG. As plataformas móveis têm maiores restrições pois temos que considerar que a pessoa poderá estar a usar uma conexão 3G.

@font-face

Como usamos então as web fonts?

O CSS2 introduziu a regra @font-face, baseada na tecnologia de embutir fontes do IE4+ com o formato EOT (nunca suportado pelos outros browsers), mas não implementada de forma completa.

O módulo de fontes do CSS3 veio agora com especificação para o @font-face.

Na sua forma mais básica funciona da seguinte forma:

@font-face {
    font-family: "Nome da Fonte", Arial, sans-serif;
    src: url('fonts/minha-fonte.ttf');
}

Com esta definição, podemos então usar esta fonte em elementos no nosso CSS:

body {
    font: 12pt/1.5 "Nome da Fonte";
}

A minha solução

Em primeiro lugar eu procuro uma fonte que seja open-source e faço download da mesma. A seguir eu uso o @font-face Generator do Font Squirrel para converter a minha fonte em vários formatos para que tenha suporte no maior número de browsers. Finalmente eu coloco o CSS e ficheiros de fontes geradas pelo Font Squirrel numa pasta fonts dentro da minha pasta css (a localização não é importante), mas faço ainda algumas modificações que já justifico a seguir.

Aqui está o exemplo de uma fonte chamada “PT Sans Caption” com variantes normal e bold:

@font-face {
  font-family: 'PT Sans Caption';
  src: url('fonts/pt_sans-caption-web-regular.eot');
  src: local('?'),
       local('PT Sans Caption'),
       url('fonts/pt_sans-caption-web-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/pt_sans-caption-web-regular.woff') format('woff'),
       url('fonts/pt_sans-caption-web-regular.ttf') format('truetype'),
       url('fonts/pt_sans-caption-web-regular.svg#PTSansCaptionRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PT Sans Caption';
  src: url('fonts/pt_sans-caption-web-bold.eot');
  src: local('?'),
       local('PT Sans Caption'),
       url('fonts/pt_sans-caption-web-bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/pt_sans-caption-web-bold.woff') format('woff'),
       url('fonts/pt_sans-caption-web-bold.ttf') format('truetype'),
       url('fonts/pt_sans-caption-web-bold.svg#PTSansCaptionBold') format('svg');
  font-weight: bold;
  font-style: normal;
}

Antes de usar este código como um template para todos os casos acho importante saber o porquê de ser assim. Há muitos gotchas para termos uma solução o mais cross-browser possível.

Repare que são duas regras @font-face separadas, com font-weight e localizações de ficheiros diferentes. O resto é igual, incluindo o nome da fonte. A regra @font-face será selecionada consoante o nosso uso do font-weight pelo nosso CSS. Não importa o nome que damos à fonte, não precisa ter nenhuma relação com o seu nome real.

O EOT é um formato suportado apenas pelo Internet Explorer, por isso o primeiro src é para suportar os browsers IE. O segundo src contém uma lista de localizações separadas por uma vírgula, onde o browser poderá encontrar a fonte num formato suportado. O local('?') é um truque para evitar que o IE (inferior à versão 9) tente sequer fazer download de qualquer uma das restantes fontes, já que não as suporta.

Como vimos no primeiro exemplo de todos, o url() permite ao browser do utilizador fazer download da fonte lá apontada para poder usá-la. No entanto, o utilizador poderá já ter essa fonte instalada no seu sistema e nesse caso seria um desperdício fazer o download. É para isso que usamos o local() em primeiro lugar. Se a fonte em local("PT Sans Caption") estiver instalada no sistema operativo do utilizador, será usada essa e poupa-se um download. É preciso não esquecer de testar a página num computador que não tenha a fonte instalada no sistema para ter-mos a certeza que tudo correrá como esperado.

Apesar do IE saber que não suporta o formato .ttf por exemplo, quando ele encontra a função url(), ele faz na mesma o download da fonte, para depois ser descartada. É por isso que usamos o format() após cada url(). Isto é novo do CSS3 e permite sugerir aos browsers o formato da fonte para que os que não a suportem não façam o seu download (usar a extensão do ficheiro linkado não é viável). Nos IE mais velhos por exemplo, que nem sequer conhecem o format(), darão um erro, o que é melhor que gastar um download inútil.

Para uma maior compreensão deste assunto, leia os artigos nos seguintes recursos.

Recursos

• Google web fonts (ferramenta)
• @font-face Generator from Font Squirrel (ferramenta)
• @font-face gotchas by Paul Irish (artigo em inglês)
• Web Fonts at the Crossing by Richard Fink (artigo em inglês)