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.
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:
@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!