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:

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>.

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:

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

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:

E logo abaixo podemos ver a folha de estilos:

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