O uso de web fonts está surgindo. Apenas no último ano, o uso de web fonts dobrou de cerca de 6% para 12%, segundo o HTTP Archive. Ao mesmo tempo, o Google Web Fonts viu um aumento de 10x na quantidade de pedidos, recentemente passando 1 bilhão de views por dia em toda 100M+ paginas da web. E não há sinais de desaceleração na adoção.

Historicamente, web fonts não tiveram uma grande história quando se trata de desempenho, mas isso está definitivamente mudando muito rápido: melhores formatos de compreensão, maior manipulação de navegador, unicode e subconjuntos de caracteres, e a lista continua. Sem muitos dos benefícios para o dispositivo de se renderizar texto como, bem, texto!, em relação a acessibilidade, indexação, tradução, tamanho de arquivo, zoom e alto DPI. Para discutir isso, e muito mais, nós nos sentamos com David Kuettel, da equipe Google Web Fonts, para um olhar profundo nas web fonts.

Otimizando web fonts

Entregar uma web font é simples: baixar o arquivo, colocá-lo no servidor local, e é isso? Acontece que é muito mais interessante do que isso. Primeiro, existem quatro formatos diferentes (woff, ttf, eot, svg), e nenhum deles oferece a adoção universal. Para ter uma experiência consistente em todas as plataformas, temos que oferecer múltiplos formatos. No longo prazo, o objetivo é ter um formato único, bem suportado, mas ao mesmo tempo temos de suportar todos os navegadores antigos.

Em seguida, o próprio arquivo da fonte pode ser enorme: Arial Unicode, que suporta quase todos os idiomas, pesa mais de 22MB! Naturalmente, uma página média não precisa de todo o conjunto de caracteres unicode, portanto, precisamos de um mecanismo para restringir o tipo de fonte para um subconjunto de caracteres (por exemplo, latino ou apenas cirílico). Open Sans, que é uma das web fonts mais populares do Google, fornece suporte para mais de 20 idiomas, e pesa 217kb no total, mas apenas 36kb quando restrito ao subconjunto latino. Nota: uma fonte média do Google Web Fonts hoje é 35kb.

<!-- Serve Open Sans font family, but only the latin character set -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />

Em seguida, o tamanho da fonte pode ser ainda mais reduzido com a eliminação de metadados font hinting para plataformas que não suportam isso. Com isso fora do caminho, podemos aplicar algoritmos de compressão otimizada para um ganho de 15% na compressão gzip simples. Com WOFF 2.0 no pipeline, devemos ver melhoria de mais de 30% na compressão em um futuro próximo.

Coloque todas essas otimizações juntas, e isso se traduz em mais de 30 variantes estáticas para cada web font, personalizadas para cada plataforma e agente do usuário. Quanta coisa para entregar um arquivo! Sem mencionar as otimizações dinâmicas, como subdivisão de caracteres, que permite que você especifique os caracteres individuais para atender às suas necessidades exatas para uma pequena manchete ou um caso de uso similar.
<!-- Serve Inconsolata font family, but only provide "H", "e", "l", "o" characters -->
<link href="http://fonts.googleapis.com/css?family=Inconsolata&text=Hello" rel="stylesheet" />

Entregando web fonts

Todas as web fonts do Google são gratuitas e de código aberto, o que permite um cache cross-site muito eficaz: Open Sans entregue neste site é o mesmo Open Sans entregue para mais de 1 milhão de domínios usando a fonte. De fato, as 40 melhores fonts web do Google  são compartilhadas por mais de 100 mil domínios e os top 300 por mais de 10 mil. Em outras palavras, usar uma web font popular provavelmente vai traduzir para um cache do navegador para acertar a fonte, mesmo se esta é a sua primeira vez visitando meu site (que usa Open Sans). Quanto maior a adoção, maior a probabilidade de acerto de cache, melhor o desempenho!

Vamos dissecar um simples exemplo de como uma web font do Google é servida:

A folha de estilo CSS fornecida pelo Google Web Fonts é dinâmica, que especifica o formato de arquivo ideal para a plataforma de visitantes e o navegador – como determinado pela combinação das otimizações que discutimos anteriormente. Esse folha de estilo é armazenada em cache por 24 horas. Dentro dela, há uma referência para o próprio recurso de web fonts. Porque não em linha a fonte web? Bem, dada a crescente popularidade de web fonts, a aposta é que você já tem uma cópia em seu cache – nenhum pedido é melhor do que nenhum pedido. Em vez de armazenar N cópias de Open Sans, uma para cada site, o navegador mantém uma única cópia em todos os sites.

Aproveitando o cache de 24 horas do CSS, e o cache de um ano para a web font em si permite a implantação rápida e fácil de atualizações, otimizando uma experiência de navegação rápida – a grande maioria das páginas exigirá zero pedidos para as web fonts. A combinação de um CDN global, formatos de arquivo otimizados, e um cache compartilhado e global paga dividendos elevados quando se trata de desempenho.

Web fonts chegaram para ficar

Web fonts chegaram aqui para ficar, e isso é uma coisa boa – sim, até mesmo para o desempenho. Melhor acessibilidade, zoom e alta DPI amigável, compressão otimizada e melhor manuseio de todos os fabricantes de navegadores – estão todos trabalhando em favor da adoção crescente. Sem mencionar a capacidade de combinar web fonts com CSS3 para alguns visuais espetaculares.

Dito isso, entregar web fonts definitivamente tem seus truques. Se você estiver pegando a rota DIY (faca você mesmo), então certifique-se de oferecer suporte para todos os formatos mais recentes, otimizar suas web fonts, entregar as versões apropriadas, e manter-se atualizado em relação aos mais recentes desenvolvimentos – muitas coisas para acertar! Para o resto de nós, um provedor de web font como Typekit ou Google Web Fonts é uma aposta muito melhor.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/