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.

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.

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:

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.

Confira também

O que é HTML?

Curso

Introdução ao CSS

Curso

CSS: @font-face

Artigo