Regra CSS @font-face

A regra CSS @font-face permite carregar uma fonte personalizada a partir de um arquivo que você hospeda (ou de um serviço web) e utilizá-la em qualquer parte da sua folha de estilos. Isso significa que você não está mais limitado às poucas fontes "seguras para web" instaladas na máquina de cada visitante.

Esta página aborda os formatos de fonte que você pode servir, como escrever uma declaração @font-face robusta com fallbacks, a propriedade font-display que controla o comportamento de carregamento, os descritores de fonte disponíveis e a alternativa de usar um serviço hospedado como o Google Fonts.

Como o @font-face funciona

Uma regra @font-face faz duas coisas:

Define um nome para a fonte com o descritor font-family (por exemplo, myFirstFont).
Aponta para um ou mais arquivos de fonte com o descritor src.

Uma vez declarada, você referencia a fonte pelo nome em qualquer regra normal de font-family, exatamente como faria com uma fonte do sistema:

@font-face {
  font-family: 'myFirstFont';
  src: url('myfirstfont.woff2') format('woff2');
}

p {
  font-family: 'myFirstFont', sans-serif;
}

Sempre termine a pilha de font-family com um fallback genérico (como sans-serif) para que o texto ainda seja legível caso o arquivo de fonte não carregue.

Formatos de fonte

Os navegadores suportam vários formatos de arquivo de fonte: ttf, otf, eot, svg, svgz, woff e woff2. Para a web moderna, você só precisa do WOFF2 (com WOFF como fallback para navegadores mais antigos); os demais são legados.

OTF-TTF

O WOFF foi criado para fornecer uma alternativa comprimida e otimizada para web às fontes OpenType e TrueType, reduzindo o tamanho do arquivo e o tempo de carregamento. No entanto, as capacidades do OpenType podem interessar a muitos designers (como ligaduras).

EOT

O formato Embedded Open Type, criado pela Microsoft (os pioneiros do @font-face) há mais de 15 anos, é o único formato que o IE8 e versões anteriores reconhecem ao utilizar @font-face.

SVG/SVGZ

O Scalable Vector Graphics (Font) é um formato de fonte vetorial. No entanto, as fontes SVG foram descontinuadas e removidas de todos os navegadores modernos. Não é mais recomendado para uso em novos projetos. SVGZ é a versão comprimida do SVG.

WOFF/WOFF2

O Web Open Font Format, criado para uso na web e desenvolvido pela Mozilla em conjunto com outras organizações, as fontes WOFF geralmente carregam mais rápido do que outros formatos porque usam uma versão comprimida da estrutura utilizada pelas fontes OpenType (OTF) e TrueType (TTF). WOFF2 é a nova geração do WOFF e possui melhor compressão.

Ao usar fontes personalizadas, devemos levar em conta as seguintes considerações:

O tamanho do arquivo. Recomenda-se usar opções que tenham versões mais leves.
As limitações do conjunto de caracteres. Você pode limitar os conjuntos de fontes para carregar apenas as fontes utilizadas.
Fontes do sistema para telas pequenas. Uma das soluções é direcionar telas maiores quando a fonte personalizada é carregada com @media.

Sintaxe

Sintaxe da Regra CSS @font-face

@font-face {
  font-properties
}

Exemplo da regra @font-face:

Exemplo da Regra CSS @font-face com os formatos EOT, TTF, SVG, WOFF e WOFF2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Controlando o carregamento com font-display

Enquanto uma fonte web é baixada, o navegador precisa decidir o que exibir. O descritor font-display controla essa troca entre um flash de texto invisível (FOIT) e um flash de texto sem estilo (FOUT):

auto — o comportamento padrão do navegador (geralmente semelhante a block).
block — oculta o texto brevemente (até ~3s), depois exibe a fonte web. Causa FOIT.
swap — exibe o texto de fallback imediatamente, depois substitui pela fonte web quando ela carregar. Melhor para texto de corpo porque o conteúdo nunca fica invisível.
fallback — um curto período de bloqueio, depois fallback; a fonte web só é substituída se chegar rapidamente.
optional — como fallback, mas o navegador pode ignorar a fonte web completamente em conexões lentas.

swap é a escolha mais comum e é usada em todos os exemplos abaixo.

Suporte a Navegadores

Suporte Mais Profundo Possível a Navegadores

Este é o método com o suporte mais amplo. Antes de qualquer estilo, devemos adicionar a regra @font-face à folha de estilos.

Regra @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Em seguida, é usada para estilizar elementos da seguinte forma:

Regra CSS @font-face

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Nível Prático de Suporte a Navegadores

Como WOFF e WOFF2 são comumente utilizados, podemos usar o seguinte:

Regra CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Suporte Super Progressivo a Navegadores

Se estivermos trabalhando com WOFF, pode-se esperar que o WOFF2 seja usado em algum momento:

Regra CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Técnicas Alternativas

Em algumas situações, pode ser melhor usar uma fonte hospedada. Isso é oferecido pelo Google Fonts como forma de usar suas fontes. No código a seguir, @import é usado para carregar uma fonte do Google Fonts:

Regra CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Depois, pode ser usada para estilizar elementos:

Regra CSS @font-face

body {
  font-family: 'Open Sans', sans-serif;
}

Um serviço hospedado pode ter uma vantagem. Ele provavelmente incluirá todas as variações do arquivo de fonte, proporcionando ampla compatibilidade entre navegadores, e não haverá necessidade de hospedar os arquivos por conta própria.

Regra CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Da mesma forma, uma folha de estilos pode ser vinculada ao mesmo recurso no <head> do documento HTML e não no CSS.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Em seguida, os elementos podem ser estilizados como nos outros métodos:

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

Novamente, as regras @font-face são importadas, mas são adicionadas ao <head> do HTML:

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Exemplo da regra @font-face usando Google Fonts:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Descritor de Fonte	Valores	Descrição
font-family	name	Define o nome da fonte e é obrigatório.
src	URL	Define a URL de onde a fonte será baixada e é obrigatório.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Define como a fonte será esticada. Seu valor padrão é normal e é opcional.
font-style	normal italic oblique	Define como a fonte será estilizada. Seu valor padrão é normal e é opcional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Define o peso da fonte. Seu valor padrão é normal e é opcional.
unicode-range	unicode-range	Define o intervalo de caracteres unicode que a fonte suporta. Seu valor padrão é U+0-10FFFF e é opcional.

Usando local() em src

Dentro de src você pode listar local('Font Name') antes das entradas url(). O navegador usará uma fonte correspondente já instalada na máquina do usuário e só baixará o arquivo se nenhuma for encontrada, economizando largura de banda:

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Capítulos relacionados

@import — inclui outra folha de estilos, incluindo um CSS de fonte hospedada.
@media — carrega fontes personalizadas condicionalmente, por exemplo, apenas em telas maiores.
font-family, font-weight e font-style — aplica a fonte que você definiu.

Prática

Qual é o propósito da regra @font-face no CSS?

Especificar uma fonte personalizada na sua página webAlterar a cor de fundo de um siteAdicionar uma folha de estilos externa a um documento HTMLIncorporar uma fonte em uma página webControlar o layout de uma página web