Como usar a API CSS Google Fonts para fornecer fontes da Web com eficiência.
Ao longo dos anos, muita coisa mudou com a tecnologia de fontes da Web. O que costumava ser uma prática de nicho que exigia uma imagem de texto ou um plug-in Flash (e que comprometia a otimização de mecanismos de pesquisa do seu site) agora é uma prática padrão na Web. Antigamente, era necessário carregar uma fonte inteira antes da página ser carregada, com estilos e caracteres que você nem usava. Mas até isso já é coisa do passado.
A API CSS Google Fonts também evoluiu ao longo dos anos para acompanhar as mudanças na tecnologia de fontes da Web. Ela percorreu um longo caminho desde a proposta de valor original, que era tornar a Web mais rápida, permitindo que o navegador armazene em cache as fontes mais usadas em todos os sites que usavam a API. Isso não é mais verdade, mas a API ainda oferece otimizações adicionais e importantes para que os sites carreguem rapidamente e as fontes funcionem bem.
Usando a API CSS do Google Fonts, seu site pode solicitar apenas os dados de fonte necessários para manter o tempo de carregamento do CSS no mínimo, garantindo que os visitantes do site possam carregar o conteúdo o mais rápido possível. A API responderá a cada solicitação com a melhor fonte para o navegador da Web.
Tudo isso acontece ao incluir uma única linha de HTML no código.
Como usar a API CSS Google Fonts
A documentação da API Google Fonts CSS resume bem:
Não é necessário programar nada. Basta adicionar um link de folha de estilo especial ao documento HTML e, em seguida, fazer referência à fonte em um estilo CSS.
O mínimo que você precisa fazer é incluir uma única linha no HTML, como esta:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Ao solicitar uma fonte da API, você especifica qual ou quais famílias você quer e, opcionalmente, os pesos, estilos, subconjuntos e muitas outras opções. A API processará sua solicitação de uma destas duas maneiras:
- Se a solicitação usar parâmetros comuns para os quais a API já tem arquivos, ela vai retornar imediatamente o CSS para o usuário, direcionando-o a esses arquivos.
- Se você solicitou uma fonte com parâmetros que a API não tem no cache, ela vai subdividir suas fontes em tempo real usando o HarfBuzz para fazer isso rapidamente e retornar o CSS que aponta para elas.
Os arquivos de fonte podem ser grandes, mas não precisam ser
É verdade que as fontes da Web podem ser grandes. Apenas um peso do Noto Sans Japanese no WOFF2 tem quase 3,4 MB. Fazer o download disso para cada um dos seus usuários seria um fardo para o tempo de carregamento da página. Quando cada milissegundo conta e cada byte é precioso, é importante carregar apenas os dados necessários para os usuários.
A API CSS Google Fonts pode criar arquivos de fonte muito pequenos (chamados de subconjuntos), gerados em tempo real, para oferecer aos usuários apenas o texto e os estilos necessários para o site. Em vez de exibir uma fonte inteira, você pode solicitar caracteres específicos usando o parâmetro text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
A API CSS também oferece otimizações de fontes da Web adicionais aos usuários de forma automática, sem parâmetros de API. A API vai disponibilizar os arquivos CSS dos usuários com o unicode-range já ativado (se for compatível com o navegador da Web), para que eles carreguem as fontes apenas para os caracteres específicos necessários para o site.
O descritor CSS de intervalo Unicode é uma ferramenta que agora pode ser usada para combater downloads de fontes grandes. Essa propriedade CSS define um intervalo de caracteres Unicode que a declaração @font-face contém. Se um desses caracteres for renderizado na página, a fonte será transferida por download. Isso funciona bem para todos os tipos de idiomas. Assim, você pode usar uma fonte que inclua caracteres latinos, gregos ou cirílicos e criar subconjuntos menores. No gráfico anterior, você pode ver que, se tivesse que carregar esses três conjuntos de caracteres, seriam mais de 600 glifos.
Isso também ativa fontes chinesas, japonesas e coreanas (CJK) para a Web. No gráfico anterior, é possível notar que uma fonte CJK tem de 15 a 20 vezes mais caracteres do que uma fonte latina. Essas fontes geralmente são muito grandes, e muitos dos caracteres desses idiomas não são usados com tanta frequência quanto outros.
O uso da API CSS e do unicode-range pode reduzir as transferências de arquivos em aproximadamente 90%. Com o descritor unicode-range, você pode definir cada parte separadamente, e cada fatia só é baixada quando o conteúdo contém um dos caracteres desses intervalos.
Exemplo: se você quisesse definir apenas a palavra "こんろちろ" em Noto Sans JP, você poderia:
- Hospedar seus próprios arquivos WOFF2.
- Use a API CSS para recuperar o WOFF2.
- Use a API CSS com o parâmetro text= definido como "こんにちは".
Neste exemplo, você pode ver que, ao usar a API CSS, já economiza 97,5% em relação ao autohospedagem da fonte WOFF2, graças ao suporte integrado da API para separar fontes grandes em intervalo Unicode. Ao ir além e especificar exatamente o texto que você quer exibir, você pode reduzir ainda mais o tamanho da fonte para apenas 95,3% da fonte da API CSS, 99,9% menor do que a fonte auto-hospedada.
A API CSS Google Fonts vai entregar fontes automaticamente no formato menor e mais compatível com o navegador do usuário. Se o usuário estiver em um navegador com suporte a WOFF2, a API vai fornecer as fontes em WOFF2. No entanto, se o usuário estiver usando um navegador mais antigo, a API vai entregar as fontes em um formato compatível com esse navegador. Para reduzir o tamanho do arquivo de cada usuário, a API também remove dados das fontes quando não são necessários. Por exemplo, os dados de sugestão serão removidos para usuários cujos navegadores não precisam deles.
Prepare suas fontes da Web para o futuro com a API CSS Google Fonts
A equipe do Google Fonts também contribui com os novos padrões W3C, que continuam inovando as tecnologias de fontes da Web, como o WOFF2. Um projeto atual é a Transferência incremental de fontes, que permite que os usuários carreguem partes muito pequenas de arquivos de fontes conforme são usadas na tela e transmitam o restante sob demanda, superando o desempenho do unicode-range. Quando você usa nossa API de fontes da Web, os usuários recebem essas melhorias na tecnologia de transferência de fontes quando elas ficam disponíveis no navegador.
Essa é a beleza de uma API de fontes: seus usuários têm o benefício de cada nova melhoria de tecnologia sem nenhuma mudança no seu site. Novo formato de fonte da Web? Sem problemas. Novo navegador ou suporte ao sistema operacional? Já está consertado. Assim, em vez de se preocupar com a manutenção das fontes da Web, você pode se concentrar nos usuários e no conteúdo.
Compatibilidade com fontes variáveis integradas
Fontes variáveis são arquivos de fontes que podem armazenar diversas variações de design em vários eixos. A nova versão da API Google Fonts CSS inclui suporte para elas. Adicionar um eixo de variação adicional permite uma nova flexibilidade com uma fonte, mas pode quase dobrar o tamanho do arquivo de fonte.
Quando você é mais específico na solicitação da API CSS, a API CSS Google Fonts pode fornecer apenas a parte da fonte variável de que o site precisa para reduzir o tamanho do download para os usuários. Isso permite o uso de fontes variáveis para a Web sem gerar tempos de carregamento de página longos. Para fazer isso, especifique um único valor em um eixo ou um intervalo. Você pode até especificar vários eixos e famílias de fontes em uma única solicitação. A API é flexível para atender às suas necessidades.
Simples de implementar e otimizadas para você
A API CSS Google Fonts ajuda você a fornecer fontes que são:
- Mais compatibilidade com navegadores da Web.
- O menor possível.
- Entrega rápida.
- Mais fácil de usar.
Para mais informações sobre o Google Fonts, acesse fonts.google.com. Para saber mais sobre a API CSS, consulte a documentação da API.
Agradecimentos
Imagem principal de leesehee.