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 do 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 Google Fonts CSS também evoluiu ao longo dos anos para acompanhar as mudanças na tecnologia de fontes da Web. Ela já avançou muito desde a proposta de valor original: tornar a Web mais rápida permitindo que seu 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 vai responder a cada solicitação com a melhor fonte para esse 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 CSS Google Fonts resume bem isso:
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 vai 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, será feito o download da fonte. Isso funciona bem para todos os tipos de idiomas, então você pode usar uma fonte que inclui caracteres latinos, gregos ou cirílicos e criar subconjuntos menores. No gráfico anterior, você pode conferir que, se você tivesse que carregar todos os 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ê quiser definir apenas a palavra こんにちは em Noto Sans JP, faça o seguinte:
- 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 especificar exatamente o texto que você quer mostrar, é possível reduzir o tamanho da fonte para apenas 95,3% da fonte da API CSS, o que é 99,9% menor do que a fonte auto-hospeda.
A API Google Fonts CSS enviará automaticamente fontes no menor e mais compatível formato aceito pelo 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 da Google Fonts também contribui para os novos padrões do W3C que continuam inovando as tecnologias de fontes da Web, como o WOFF2. Um projeto atual é a Incremental Font Transfer, que permite aos usuários carregar partes muito pequenas de arquivos de fontes usadas na tela e transmitir no restante sob demanda, superando o desempenho de unicode-range. Quando você usa nossa API de fontes da Web, seus usuários recebem essas melhorias na tecnologia de transferência de fontes quando elas são disponibilizadas no navegador.
Esta é a beleza de uma API de fontes: seus usuários têm o benefício de cada nova melhoria tecnológica sem nenhuma alteração em seu site. Novo formato de fonte da Web? Sem problemas. Suporte a um novo navegador ou sistema operacional? Já resolvemos. 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 da 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 causar longos tempos de carregamento da página. 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.