Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

@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("http://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
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

Veja também

Etiquetas do documento e colaboradores

 Colaboradores para esta página: fscholz, teoli, Verruckt, Leandro Mercês Xavier
 Última atualização por: fscholz,