@font-face

Resumo

@font-face permite que autores especifiquem fontes online para exibir texto em suas páginas web. Permitindo autores a proporcionar suas próprias fontes, @font-face elimina a necessidade de depender do limitado número de fontes que os usuários tem instalado em seus computadores.

Sintaxe

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

Valores

<a-remote-font-name>: Especifica um nome para a fonte que será usado como valor de font-face na propriedade font.
<source>: URL para a localização remota do arquivo da fonte ou o nome da fonte no computador do usuário na forma local("Nome da Font").
<weight>: Um valor para a espessura da fonte (font weight (en)).
<style>: Um valor para o estilo da fonte (font style (en)).

Você pode especificar uma fonte local no computador do usuário através do nome, usando a sintaxe local(). Se esta fonte não for encontrada, outras fontes serão tentadas até que uma seja encontrada.

Formatos de fontes suportados

O Gecko 1.9.1 (Firefox 3.5) suporta fontes True Type e OpenType.
O Gecko 1.9.2 (Firefox 3.6) adiciona suporte para WOFF (en).

Exemplos

Este simples exemplo especifica uma fonte baixável para uso, aplicando-a ao corpo do documento.

Ver amostra

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

Neste exemplo, a cópia local do usuário de "Helvetica Neue Bold" é usada; se o usuário não possuir a fonte instalada (dois diferentes nomes são tentados), então, a fonte baixável, chamada "MgOpenModernaBold.ttf" é usada em seu lugar:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Notas

No Gecko, fontes web estão sujeitas à mesma restrição de domínio (arquivos de fontes precisam estar no mesmo domínio da página que os está utilizando), a menos que HTTP access controls (EN) seja usado para relaxar esta restrição.
Nota: O tipo MIME do arquivo especificado não é considerado porque não há tipos MIME definidos parar fontes TrueType e OpenType.
Quando o Gecko exibe uma página que usa fontes web, ele inicialmente exibe o texto usando a melhor fonte fallback CSS disponível no computador do usuário enquanto aguarda o fim do download da fonte web. Conforme as fontes web são baixadas, o Gecko atualiza o texto que use essa fonte. Isto permite que o usuário leia o texto da página mais rapidamente.

Compatibilidade com navegadores

Navegador	Versão mais antiga	Suporte a
Internet Explorer	4.0	Somente fontes OpenType embutidas
Firefox (Gecko)	3.5 (1.9.1)	Somente fontes TrueType e OpenType
Firefox (Gecko)	3.6 (1.9.2)	Formato de fonte web aberta (WOFF)
Opera	10.0	Somente fontes TrueType e OpenType
Safari (WebKit)	3.1 (525)	Somente fontes TrueType e OpenType

Veja também MSDN Microsoft library @font-face (EN).

Especificações

CSS 2 Fonts 12/05/1998 - Obsoleto
CSS 3 Fonts 2009 - Rascunho em trabalho
WOFF file format specification - Rascunho

Veja também

FontSquirrel @font-face generator (en)
About WOFF (en)
Beautiful fonts with @font-face (en)
Open Font Library (en)
10 Great Free Fonts for @font-face embedding (en)