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