@font-face

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

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.

css
@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():

css
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-face { <declaration-list> }

Exemplos

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

Veja este exemplo

css
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}

p {
  font-family: "Bitstream Vera Serif Bold", serif;
}
html
<p>This is Bitstream Vera Serif Bold.</p>

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:

css
@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á:

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

Especificações

Specification
CSS Fonts Module Level 4
# font-face-rule

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-face
OpenType CBDT and CBLC rendering
OpenType COLRv0 rendering
OpenType COLRv1 rendering
OpenType SBIX rendering
OpenType SVG rendering
SVG fonts
DeprecatedNon-standard
WOFF
WOFF 2
ascent-override
descent-override
font-display
font-family
font-feature-settings
font-stretch
font-style
font-variant
Non-standard
font-variation-settings
font-weight
line-gap-override
size-adjust
src
Drop invalid item (not src string)
format(keyword)
format('*-variations')
Non-standard
tech(keyword)
unicode-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Veja Também