@font-face

O @font-face CSS at-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usu√°rio. Se a fun√ß√£o local() for fornecida, a especifica√ß√£o do nome da fonte a ser procurada no computador do usu√°rio, e a user agent encontrar uma correspond√™ncia, essa fonte local ser√° usada. Caso contr√°rio, o recurso de fonte especificado usando a fun√ß√£o url() √© baixado e usado.

Ao permitir que os autores forne√ßam suas pr√≥prias fontes, @font-face torna poss√≠vel projetar conte√ļdo sem se limitar √†s chamadas fontes "seguras para a web" (ou seja, as fontes que s√£o t√£o comuns que s√£o consideradas como universalmente dispon√≠vel). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte al√©m do b√°sico, ao mesmo tempo em que √© poss√≠vel faz√™-lo sem depender de uma conex√£o com a Internet.

√Č comum usar url() e local() juntos, para que a c√≥pia instalada da fonte do usu√°rio seja usada, se dispon√≠vel, voltando ao download de uma c√≥pia da fonte, caso ela n√£o seja encontrada no dispositivo do usu√°rio.

A regra de CSS @font-face pode ser usada n√£o apenas no n√≠vel superior de um CSS, mas tamb√©m dentro de qualquer CSS conditional-group at-rule.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Sintaxe

Descritores

font-display
Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.
font-family
Especifica um nome que ser√° usado como o valor nominal da fonte para as propriedades da fonte.
font-stretch
Um valor font-stretch. Desde o Firefox 61 (e em outros navegadores modernos), isso tamb√©m aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extens√£o de fonte: font-stretch: 50% 200%;
font-style
Um valor font-style. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo font-style: oblique 20deg 50deg;
font-weight
Um valor de font-weight. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo font-weight: 100 400;
font-variant
Um valor font-variant.
font-feature-settings
Permite o controle sobre recursos tipográficos avançados em fontes OpenType.
font-variation-settings
Permite o controle de baixo n√≠vel sobre as varia√ß√Ķes de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de varia√ß√£o.
src

Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.

Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função format():

src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("truetype");

Os tipos dispon√≠veis s√£o: "woff", "woff2", "truetype", "opentype", "embedded-opentype", e "svg".

unicode-range
O intervalo de pontos de código Unicode a serem usados na fonte.

Sintaxe formal

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

where
<family-name> = <string> | <custom-ident>+

Exemplos

Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:

Veja este exemplo

<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://mdn.mozillademos.org/files/2468/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 "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:

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

Font MIME Types

Formato MIME type
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Notes

  • As fontes da Web est√£o sujeitas √† mesma restri√ß√£o de dom√≠nio (os arquivos de fonte devem estar no mesmo dom√≠nio da p√°gina que os utiliza), a menos que os Controles de Acessos HTTP sejam usados para relaxar essa restri√ß√£o.
  • @font-face n√£o pode ser declarado dentro de um seletor CSS. Por exemplo, o seguinte n√£o funcionar√°:
    .className {
      @font-face {
        font-family: MyHelvetica;
        src: local("Helvetica Neue Bold"),
             local("HelveticaNeue-Bold"),
             url(MgOpenModernaBold.ttf);
        font-weight: bold;
      }
    }

Especifica√ß√Ķes

Especificação Status Comentário
WOFF File Format 2.0
The definition of 'WOFF2 font format' in that specification.
Recomendação Especificação de formato de fonte com novo algoritmo de compactação.
WOFF File Format 1.0
The definition of 'WOFF font format' in that specification.
Recomendação Especificação de formato
CSS Fonts Module Level 3
The definition of '@font-face' in that specification.
Candidata a Recomendação Definição Inicial

Compatibilidade do navegador

BCD tables only load in the browser

Veja Também