Atualmente, a ampla disponibilidade de fontes web permite que um site seja um “país das maravilhas” tipográfico, mas o custo disso é o aumento do tamanho das páginas e consequente tempo de carregamento mais longo. Desenvolvedores focados em desempenho já otimizam imagens (inclusive com técnicas responsivas) e CSS e, caso ainda não saiba, também é possível melhorar o tempo de carregamento de um site ao usar subconjuntos de fontes.

A boa notícia é que aprimorar o tempo de carregamento com subconjuntos de fontes é fácil: basta criar sua própria fonte personalizada ou fornecer a fonte através de um serviço web com um valor simples de variável para que você possa carregar somente os glifos que precisa para o texto da página, fazendo isso ao invés de usar toda a gama de caracteres, números e símbolos presentes na fonte escolhida, reduzindo o tempo de carregamento e melhorando a performance.

Usar subconjuntos de fontes geralmente é bastante eficaz, desde que tenha esses 2 pontos em mente:

Subconjuntos de fontes com Google Fonts

Google Fonts, o serviço de web fonts mais popular, tem uma série de opções para subconjuntos. O primeiro já está embutido:

Seleção padrão de conjunto de caracteres do Google Fonts

Seleção padrão de conjunto de caracteres do Google Fonts

Por padrão, será baixado apenas o subconjunto Latin: letras maiúsculas e minúsculas A-Z, números e sinais de pontuação. A opção “estendida” (Latin Extended) deve conter os caracteres adicionais usados em idiomas europeus (caracteres acentuados, tremas e similares), mas a qualidade e extensão desses caracteres, como entregues pelo Google, é muitas vezes limitado: você pode, em algumas situações , querer hospedar a fonte para ter acesso ao conjunto completo de caracteres.

As opções de subconjunto também podem ser alteradas na URL de requisição da fonte:

Limitando Google Fonts para caracteres específicos

Também é possível limitar a requisição para apenas os caracteres que se queira usando uma query string:

Isso servirá apenas os caracteres “H”, “e”, “l” e “o” da fonte Open Sans, reduzindo significativamente o tamanho da requisição!

Requisição completa:

Google Font, requisição de fonte completa: 14.7KB em 100ms

Google Font, requisição de fonte completa: 14.7KB em 100ms

Requisição especificando subconjunto de caracteres:

Google Font, requisição de fonte especificando subconjunto de caracteres: 1.2KB em 60ms

Google Font, requisição de fonte especificando subconjunto de caracteres: 1.2KB em 60ms

Esta técnica é perfeita para webfonts usadas para renderizar logos ou definir manchetes, caso em que os caracteres usados são sempre conhecidos de antemão; mas esteja atento para o fato de que é possível começar a ter problemas se o texto tiver caracteres que estão fora da faixa indicada:

Perceba que os caracteres “F”, “r”, “n” e “d” não renderizam corretamente, já que não foram especificados no subconjunto de fontes da requisição.
Resultado do texto usando uma faixa de caracteres em requisição de subconjunto de fontes

Resultado do texto usando uma faixa de caracteres em requisição de subconjunto de fontes

Se você quiser ir na direção completamente oposta e obter um arquivo muito maior como resultado, pode direcionar o Google a fornecer a fonte completa, incluindo kerning, ligaduras e dados OpenType usando “subset=all”: http://fonts.googleapis.com/css?family=Open+Sans&subset=all

Subconjuntos de fontes com hospedagem própria

Também é possível usar subconjuntos de fontes através de seu próprio servidor criando uma fonte personalizada que contenha somente os glifos necessários.

É muitas vezes assumido — e isso é compreensível — que a propriedade CSS unicode-range seja usada para especificar subconjuntos de fontes. Mas isso é somente parcialmente verdade: em Unicode, a fonte inteira ainda é carregada, mas somente os caracteres em um intervalo definido são realmente utilizados. Portanto, não se trata de uma técnica de otimização de web fonts do tipo que está sendo tratada neste artigo.

Atualmente, a maneira mais fácil de se fazer isso é usando a opção “Expert” do serviço especialistas no gerador de webfont Font Squirrel:

No exemplo, optou-se por usar somente letras maiúsculas a partir da fonte Lobster. Extraindo estes em uma fonte web, produz um ficheiro que é muito menor: o original (lobster.woff) tem 62KB; o personalizado (lobster-caps.woff), 7.7KB!

E ainda é possível garantir que as letras maiúsculas só serão escritas em Lobster no meu site, usando:

Se você estiver usando apenas alguns caracteres de uma fonte, pode valer a pena codificar em base-64, o que poupa uma requisição HTTP. Transformar os glifos em SVG também seria uma opção.

Conclusão

Usar subconjuntos de fontes em seus sites pode ser uma via extremamente poderosa e útil, mas é algo que precisa ser cuidadosamente analisado e planejado. As demandas de designers, provedores de conteúdo e tradutores devem ser considerados ao escolher o intervalo de texto usado num subconjunto de fonte.

Tendo passado por este planejamento e fazendo tudo certinho, tenha certeza de que ao usar subconjuntos de fontes você poupará preciosos KB e requisições HTTP, diminuindo o tamanho total das páginas e melhorando a performance geral!