Artigos CSS CSS: @font-face

A tipografia é uma parte importante do design de um site/aplicação e, juntamente com cores e outros elementos, compõem sua identidade visual. Normalmente, em projetos que requerem um design aprimorado, a utilização de fontes textuais específicas se faz necessária para obter os resultados esperados.

Antes da CSS3, a utilização de fontes em páginas web se restringia àquelas que se encontravam instaladas no ambiente de desenvolvimento e no computador do cliente. Na versão mais recente das folhas de estilo, porém, importar fontes externas se tornou uma tarefa bastante simples. Para isso, podemos utilizar o recurso @font-face, cuja sintaxe e funcionamento serão vistos neste documento.

Tópicos

Sintaxe básica

A diretiva @font-face permite importar uma fonte a partir de um arquivo externo e utilizá-la como uma fonte nativa nas páginas HTML. A sua sintaxe básica é a seguinte:


@font-face {
   font-family: [nome];
   src: url([caminho]);
}

Linha 2: O nome definido para essa fonte será utilizado em todos os elementos em que essa fonte deva ser aplicada. Nesse atributo, caso o nome escolhido possua espaços em branco, é necessário informá-lo entre aspas duplas. Por exemplo, os seguintes valores são válidos para esse atributo: Aller, Roboto, “Kumar One”, “Open Sans”.

Linha 3: No atributo src devemos informar o caminho do arquivo de fonte que queremos importar. Esse arquivo pode estar hospedado localmente ou em um servidor externo. Aqui, caso o caminho para o arquivo possua espaços em branco, o mesmo deve ser informado entre aspas duplas.

Nota: Para que um arquivo de fonte possa ser importado de um servidor externo ele deve ser fornecido via HTTPS por esse servidor.

Uma vez definida a diretiva @font-face, podemos referenciar essa fonte na formatação dos elementos da página. Por exemplo, a folha de estilos abaixo importa a fonte do arquivo Barrio-Regular.ttf e a referencia pelo nome Barrio para formatar os elementos <h1>.


@font-face {
  font-family: Barrio;
  src: url(../fonts/Barrio-Regular.ttf)
}
 
h1 {
  font-family: Barrio;
}

Na Figura 1 é possível ver o resultado dessa formatação. Note que temos um elemento <h1> com a fonte customizada e um elemento <h2> com a fonte normal.

Exemplo de fonte customizada
Figura 1. Exemplo de fonte customizada

A função local

Ao preencher o atributo src da diretiva @font-face podemos usar a função local() para informar ao browser que ele deve tentar usar uma fonte local, caso a mesma esteja instalada. Se a fonte local não for localizada, então será considerado o valor da função url() e o browser fará download do arquivo externo.

A sintaxe para uso dessa função é a seguinte:


@font-face {
  font-family: [nome];
  src: local([nome da fonte local]), url([caminho]);
}

Por exemplo, se há a possibilidade de o cliente possuir a fonte instalada localmente, podemos definir essa diretiva da seguinte forma:


@font-face {
  font-family: Barrio;
  src: local(Barrio), url(../fonts/Barrio-Regular.ttf)
}

Configurações adicionais

Além dos atributos font-family e src vistos anteriormente a diretiva @font-face contém ainda outros atributos opcionais:

  • font-stretch: Faz com que a fonte customizada seja aplicada apenas a elementos que possuem esse mesmo valor na propriedade font-stretch. Por exemplo, se esse atributo for definido como condensed, a fonte será aplicada apenas a elementos com font-stretch: condensed. Os valores possíveis são: normal (padrão), condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded;
  • font-style: Define que a fonte será aplicada apenas aos textos formatados com o mesmo valor de font-style. Por exemplo, se esse atributo for definido como italic, a fonte será aplicada apenas a textos com font-style:italic. Os valores possíveis são: normal (padrão), italic e oblique;
  • font-weight: Faz com que essa fonte seja aplicada apenas a textos formatados com essa espessura de texto. Por exemplo, se definirmos esse atributo como 400, apenas textos formatados com font-weight: 400 usarão essa fonte;
  • unicode-range: Faixa de caracteres (em hexadecimal, baseado na tabela ASCII) que serão formatados com essa fonte. O valor padrão é U+0-10FFFF, que abrange todos os caracteres.

Formatos de fonte

Existem atualmente diversos formatos de arquivo de fonte e é importante optar por aquele que apresenta maior compatibilidade entre os browsers. Na Tabela 1 podemos ver quais formatos são suportados por qual versão dos principais browsers da atualidade:

Formato Chrome IE/Edge Firefox Safari Opera
TTF/OTF 4.0 9.0 3.5 3.1 10.0
WOFF 5.0 9.0 3.6 5.1 11.1
WOFF2 36.0 Não suportado 35.0 Não suportado 26.0
SVG 4.0 Não suportado Não suportado 3.2 9.0
EOT Não suportado 6.0 Não suportado Não suportado Não suportado

Exemplo prático

A seguir temos um exemplo prático de uso do @font-face. Nesse código podemos ver alguns aspectos importantes desse recurso:

  • O nome da fonte contém um espaço em branco, então foi definido entre aspas;
  • Usamos a função local() para tentar carregar a fonte localmente, caso ela exista, antes de efetuar o download do arquivo;
  • Indicamos fontes específicas para diferentes configurações de font-weight;

Primeiramente temos o código HTML que receberá a formatação:


  <!DOCTYPE html>
  <html lang="pt-br">
  <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="css/estilo.css">
  </head>
  <body>
        <p id="p1">Texto normal.</p>
        <p id="p2">Texto com font-weight: 600</p>
        <p id="p3">Texto com font-weight: 800</p>
  </body>
  </html>

E logo abaixo podemos ver a folha de estilos:


  @font-face {
     font-family: "Raleway Especial";
     src: local(Raleway), url(../fonts/Raleway-Normal.ttf);
  }
  
  @font-face {
     font-family: "Raleway Especial";
     src: local(Raleway), url(../fonts/Raleway-Bold.ttf);
     font-weight: 600;
  }
  
@font-face {
    font-family: "Raleway Especial";
    src: local(Raleway), url(../fonts/Raleway-ExtraBold.ttf);
    font-weight: 800;
 }
 
 p {
    font-family: "Raleway Especial"
 }
 
 #p2 {
    font-weight: 600;
 }
 
 #p3 {
    font-weight: 800;
 }

Linhas 2, 7 e 13: Definimos o nome da fonte que será usada dali em diante. Note que definimos a mesma fonte três vezes, porém em cada uma elas importamos um arquivo específico para cada espessura de fonte;

Linhas 3, 8 e 14: Usamos a função local para tentar carregar a fonte chamada Raleway do computador local(), caso ela esteja instalada. Caso contrário, será importado o arquivo informado na função url();

Linhas 9 e 15: Especificamos que cada um desses arquivos será usado para textos com certas espessuras (600 e 800). Ou seja, cada parágrafo formatado nas linhas 22 e 26, respectivamente, utilizará esses arquivos específicos.

O resultado pode ser visto na Figura 2.

Fontes específicas para diferentes espessuras
Figura 2. Fontes específicas para diferentes espessuras

Confira também

O que é HTML?

O que é HTML?

Curso
Introdução ao CSS

Introdução ao CSS

Curso
CSS: @font-face

CSS: @font-face

Artigo