--- title: '@font-face' slug: Web/CSS/@font-face translation_of: Web/CSS/@font-face ---

{{ CSSRef() }}

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

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

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