Como usar a API Google Fonts CSS para fornecer fontes da Web de maneira eficiente.
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 comprometeu a otimização de mecanismos de pesquisa do seu site) agora é uma prática padrão em toda a Web. Há algum tempo, você precisou carregar uma fonte inteira antes do carregamento da página, com estilos e caracteres que talvez você não tenha usado, mas isso virou 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 avançou muito em relação à sua proposta de valor original: tornar a Web mais rápida ao permitir que o navegador armazene em cache as fontes mais usadas em todos os sites que usam a API. Isso não é mais verdade, mas a API ainda oferece otimizações adicionais e importantes para que os sites sejam carregados rapidamente e as fontes funcionem bem.
Com a API CSS do Google Fonts, seu site pode solicitar apenas os dados de fonte necessários para manter o tempo de carregamento de CSS mínimo. Isso garante 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 incluindo uma única linha de HTML em seu código.
Como usar a API Google Fonts CSS
A documentação da API Google Fonts CSS resume bem isso:
Não é necessário fazer nenhuma programação. Basta adicionar um link de folha de estilo especial ao documento HTML e consultar a fonte em um estilo CSS.
O mínimo que você precisa fazer é incluir uma única linha em seu HTML, assim:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Ao solicitar uma fonte da API, você especifica de quais famílias 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 retornará imediatamente CSS para o usuário, direcionando-o para esses arquivos.
- Se você solicitou uma fonte com parâmetros que a API não armazena em cache atualmente, ela cria um subconjunto de fontes em tempo real, usando o HarfBuzz para fazer isso rapidamente, e retorna o CSS apontando para elas.
Os arquivos de fonte podem ser grandes, mas não precisam ser
As fontes da Web podem ser grandes, é verdade. Apenas um peso da Noto Sans Japan no WOFF2 é de quase 3,4 MB.Fazer o download desse pacote para todos os usuários traria o tempo de carregamento da página. Quando cada milissegundo conta e cada byte é valioso, você quer garantir que está carregando apenas os dados de que os usuários precisam.
A API Google Fonts CSS pode criar arquivos de fontes muito pequenos (chamados de subconjuntos), gerados em tempo real, para atender aos usuários apenas o texto e os estilos exigidos pelo seu 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 mais otimizações de fontes da Web para os usuários automaticamente, sem parâmetros de API. A API veicula arquivos CSS com o unicode-range já ativado (se compatível com o navegador da Web). Dessa forma, eles carregam as fontes apenas para os caracteres específicos necessários ao site.
O descritor CSS unicode-range é 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 dessa fonte. Isso funciona bem para todos os tipos de idioma, para que você possa usar uma fonte que inclua caracteres latinos, gregos ou cirílicos e criar subconjuntos menores. No gráfico anterior, é possível notar que, se você tivesse que carregar todos esses três conjuntos de caracteres, estaria mais de 600 glifos.
Isso também ativa fontes chinesas, japonesas e coreanas (CJK) para a Web. No gráfico anterior, observe que uma fonte CJK cobre de 15 a 20 vezes o número de caracteres que uma fonte de caracteres latinos tem. Geralmente, essas fontes são muito grandes, e muitos dos caracteres desses idiomas não são usados com tanta frequência.
O uso da API CSS e unicode-range pode reduzir as transferências de arquivos em aproximadamente 90%. Usando o descritor unicode-range, é possível definir cada parte separadamente. O download de cada fatia só é feito quando o conteúdo tem um dos caracteres nesses intervalos de caracteres.
Exemplo: se você quisesse definir apenas a palavra "こんちは" em Noto Sans JP, você poderá:
- Hospede 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, é possível notar que, ao usar a API CSS, você já está economizando 97,5% em vez de hospedar a fonte WOFF2 automaticamente, graças ao suporte integrado da API para a separação de fontes grandes em unicode-range. Ao dar um passo adiante e especificar exatamente o texto que você quer exibir, é possível 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 Google Fonts CSS vai enviar automaticamente fontes no formato menor e mais compatível com o navegador do usuário. Se o usuário estiver em um navegador compatível com WOFF2, a API fornecerá as fontes em WOFF2, mas se o usuário estiver usando um navegador mais antigo, a API fornecerá as fontes em um formato compatível com o navegador. Para reduzir o tamanho do arquivo para cada usuário, a API também remove dados das fontes quando não são necessários. Por exemplo, os dados de dica serão removidos para usuários cujos navegadores não precisem deles.
Como preparar suas fontes da Web para o futuro com a API Google Fonts CSS
A equipe do Google Fonts também contribui com novos padrões W3C que continuam inovando as tecnologias de fontes da Web, como o WOFF2. Um projeto atual é a Transferência incremental de fonte, que permite aos usuários carregar partes muito pequenas de arquivos de fonte à medida que são usados na tela e fazer streaming do restante sob demanda, superando o desempenho do 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.
Essa é a beleza de uma API de fontes: seus usuários se beneficiam de cada nova melhoria tecnológica sem nenhuma alteração no site. Novo formato de fonte da Web? Sem problemas. Suporte a novos navegadores ou sistemas operacionais? Tudo certo. Portanto, em vez de ficar preso com a manutenção de suas fontes da Web, você fica livre para se concentrar nos usuários e no seu conteúdo.
Fontes variáveis têm suporte integrado
As fontes variáveis são arquivos de fontes que podem armazenar uma variedade de variações de design entre vários eixos. A nova versão da API Google Fonts CSS inclui suporte para elas. Adicionar um eixo adicional de variação permite nova flexibilidade com uma fonte, mas pode quase dobrar o tamanho do arquivo de fonte.
Quando você precisa fazer uma solicitação de API CSS mais específica, a API Google Fonts CSS pode atender apenas a parte da fonte variável necessária para seu site reduzir o tamanho do download para os usuários. Isso permite o uso de fontes variáveis para a Web sem longos tempos de carregamento da página. Isso pode ser feito especificando um único valor em um eixo ou um intervalo. É possível até mesmo especificar vários eixos e diversas famílias de fontes, tudo em uma solicitação. A API é flexível para atender às suas necessidades.
Simples de implementar, otimizados para você
A API Google Fonts CSS ajuda a fornecer fontes que:
- Mais compatível com navegadores da web.
- O menor valor possível.
- Entregue rapidamente.
- Mais fácil para você 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.