Melhore o tempo de carregamento com subconjuntos de fontes

Este post tem como objetivo ajudar os desenvolvedores a otimizarem suas fontes, reduzindo consideravelmente o tamanho dos arquivos e otimizando o tráfego do usuário. Além da dica de hoje, não deixe de conferir a postagem que falamos sobre como reduzir o tamanho das fontes com ícones.

Postagem vista no site Desenvolvimento para Web, por ser de grande valia, estamos compartilhando com nossos leitores, boa leitura.

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:

• Para usar as versões mais eficazes desta técnica — que carregam uma gama limitada de caracteres da fonte — você deve ter certeza de que o texto renderizado não vai mudar substancialmente no futuro, como glifos que não estão explicitamente carregado corretamente
• Se você mesmo está hospedando fonte, deve garantir que as fontes não-WOFF são servidas com gzip — que vai economizar uma média de 40~70% no tamanho do arquivo — antes de se preocupar em obter benefícios de subconjuntos de fontes

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:

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:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext,latin" rel="stylesheet">

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:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

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

Requisição completa:

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Requisição especificando subconjunto de caracteres:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

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:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">
 
<style>
    h1 { font-family: Open Sans; }
</style>
 
<h1>Hello, Frendo</h1>

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.

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.

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:

@font-face { font-family: Lobster; src: url("Lobster/lobster-caps.woff"); }
 
h1 {
    font-family: Lobster;
    text-transform: uppercase;
}

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!