Dicas – Webfonts

Webfonts são definidos em CSS através da regra @font-face .
Se você é um desenvolvedor web, provavelmente já escreveu, copiou e colou, ou, pelo menos, viu algo assim @font-face .
Por uma questão didática, vamos rapidamente ver um exemplo básico:

  @font-face {
font-family: Dosis;
src: url(Dosis-regular.woff);
}

Isso cria uma nova família de webfont que pode ser referenciada através da propriedade font-family ou da lista font abreviada.
Ao fazer referência a um webfont em uma lista de fontes, certifique-se sempre de incluir pelo menos uma fonte de retorno no caso de a webfont falhar ao carregar.
Aqui, se Dosis não for carregada, o navegador retornará à serif família genérica de fontes:

  p {
font-family: Dosis, serif;
}

Font Família

Criar uma família de fontes com vários estilos usa-se @font-face para cada estilo e usando o mesmo font-family .
As @font-face regras a seguir criam uma família com um estilo normal e negrito:

  @font-face {
font-family: Dosis;
src: url(Dosis-regular.woff);
font-weight: normal;
}

@font-face {
font-family: Dosis;
src: url(Dosis-bold.woff);
font-weight: bold;
}

Você pode usar esta família de fontes em seu CSS, fazendo referência ao nome da família e ao peso em seus seletores.
O código abaixo aplica o estilo regular aos parágrafos e o estilo strong :

  p {
font-family: Dosis, serif;
}

p strong {
font-weight: bold;
}

Além disso font-weight , @font-face também aceita as propriedades font-style e font-stretch , que definem estilos como itálico e condensado.
Todos as três propriedades podem ser usadas ​​para criar uma família de fontes única com vários estilos.
Teoricamente, isso permite que você crie uma família contendo 243 estilos individuais (9 font-weight × 3 font-style x 9 font-stretch ).
Na prática, no entanto, você está limitado a 27 valores, uma vez que alguns navegadores não suportam font-stretch .

Formatos de fonte

O src informa um navegador onde obter um arquivo de fonte.
Os exemplos anteriores usaram um único formato de fonte, muitas vezes você verá URLs para vários formatos de fonte combinados, que são anexadas após o URL usando a sintaxe format("value") .
Abaixo o código indica ao navegador qual é o formato do arquivo de fonte em uma determinado URL.

  @font-face {
font-family: Dosis;
src: url(Dosis-regular.woff2) format("woff2"),
url(Dosis-regular.woff) format("woff");
}

Se você listar vários formatos, os navegadores modernos escolherão o primeiro formato que eles aceitam com base no código.
Portanto, é importante listar os formatos de webfont, na ordem de melhor compatibiidade.

Mesmo que as dicas de formato sejam opcionais, incluilas deixam o navegador informado sobre o formato sem precisar baixar a fonte.
Por exemplo, se um navegador não suportar o WOFF2, mas apoia o WOFF, pode ignorar o arquivo de fonte WOFF2 com base na sugestão de formato.

Os navegadores suportam vários formatos webfont: OpenType (TrueType), EOT, WOFF e WOFF2.

EOT, WOFF e WOFF2 são tecnicamente não são formatos de fonte.
Eles são arquivos OpenType compactados com vários graus de compressão.
O WOFF2 oferece a melhor compressão, seguido de WOFF e EOT.

Formato IE 8 IE 9-11 Edge Chrome Firefox Safári Ópera Android System
WOFF2 Não Não sim sim sim sim sim Não
WOFF Não sim sim sim sim sim sim sim
OpenType Não sim sim sim sim sim sim sim
EOT sim sim Não Não Não Não Não Não

Para cobertura de todos os navegadores, você pode usar algo chamado de sintaxe à bulletproof @font-face pela Fontspring.
A sintaxe bulletproof usa arquivos de fonte EOT, WOFF2, WOFF, raw OpenType e SVG para obter a cobertura máxima do navegador:

  @font-face {
font-family: Dosis;
src: url(Dosis.eot?#iefix) format("embedded-opentype"),
url(Dosis.woff2) format("woff2"),
url(Dosis.woff) format("woff"),
url(Dosis.otf) format("opentype"),
url(Dosis.svg#Dosis) format("svg");
}

A primeira linha de URL pode parecer um pouco estranha para você.
As versões do Internet Explorer 8 e abaixo não suportam a sintaxe para múltiplos formatos de fonte e tratam o valor inteiro da propriedade src de uma URL.
A sintaxe bulletproof força o Internet Explorer 8 e abaixo para interpretar que as URLs restantes fazem parte de fragmento da primeira URL.

Como os identificadores de fragmento são ignorados ao baixar arquivos, o Internet Explorer, simplesmente usa a primeira URL.
Navegadores diferentes do Internet Explorer ignorarão a linha porque eles não suportam o EOT.
O resto das entradas são o que você esperaria: formatos de fonte listados na ordem de preferência.

Como a maioria dos sites já não suporta navegadores antigos, é recomendado usar uma sintaxe simplificada.
Esta sintaxe simplificada abrange todos os navegadores modernos, bem como alguns mais antigos que ainda estão em uso, como o Android 4.4 e versões anteriores:

  @font-face {
font-family: Dosis;
src: url(Dosis.woff2) format("woff2"),
url(Dosis.woff) format("woff"),
url(Dosis.otf) format("opentype");
}

Mesmo que as versões anteriores do Android ainda sejam usadas, a dependência mundial desses navegadores está diminuindo rapidamente.
Em breve, você poderá usar o formato OpenType o que simplificará ainda mais a sintaxe:

  @font-face {
font-family: Dosis;
src: url(Dosis.woff2) format("woff2"),
url(Dosis.woff) format("woff");
}

Nesse caso, alguém que esteja executando um navegador antigo simplesmente verá suas fontes alternativas em vez da webfont.
Isso é bom; eles ainda podem ler o conteúdo na fonte de retorno.

Existe outro valor possível para o uso do src .
Abaixo uma função que obtem o nome de uma família de fontes local.
Se a fonte estiver instalada no sistema, o navegador usará, evitando assim um download extra.

  @font-face {
font-family: Dosis;
src: local("Dosis"),
url(Dosis-regular.woff2) format("woff2"),
url(Dosis-regular.woff) format("woff");
}

Embora isso possa parecer uma ótima otimização, nada garante que a fonte local corresponda ao seu webfont.
Você pode obter uma versão diferente da fonte, uma fonte com suporte de idioma diferente, ou mesmo uma fonte totalmente diferente.
Por esse motivo, geralmente é recomendado não usar a função local , a menos que você considere essas desvantagens aceitáveis.

Próximo Post

Anterior Post