O Google Fonts agora oferece suporte total a fontes variáveis na atualização da API v2. Explicaremos como chamar famílias de fontes únicas e múltiplas e como especificar intervalos de eixos. Para uma visão mais detalhada sobre fontes variáveis, saiba mais com este catálogo ilustrado interativamente de David Berlow na TypeNetwork.
Novidades
Tudo começa com um novo URL base:
https://fonts.googleapis.com/css2
A sintaxe para especificar estilos em cada família mudou para descrever a fonte variável "design spaces".
Guias de início rápido
Copie e cole este HTML em um arquivo:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Usando um navegador para abrir o arquivo, a página precisa renderizar o texto "Tornar a Web bonita" na fonte Crimson Pro.
Várias famílias
Para solicitar várias famílias, especifique o parâmetro family= para cada uma delas.
Por exemplo, para solicitar as fontes Crimson Pro e Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Copie e cole este HTML em um arquivo:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
Usando um navegador para abrir o arquivo, a página deve renderizar o texto "Como tornar a Web bonita" primeiro no Crimson Pro e depois no Literata.
Intervalos dos eixos
As fontes variáveis oferecem intervalos contínuos de estilos, geralmente sem latência adicional. Isso é relevante para o design responsivo. Essa tipografia dinâmica usa intervalos contínuos de estilos, oferecendo todos os pesos entre 100 e 900 em uma página e variando de forma responsiva o peso com base em algumas condições.
Para solicitar um intervalo de um eixo de fonte variável, mescle os dois valores com ...
| Fontes | Solicitação |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Itálico Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Itálico negrito e Crimson Pro e [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Estilos individuais, como peso
Sem especificações de estilo, a API fornece o estilo padrão da família solicitada. Para solicitar outros estilos individuais, como pesos específicos, anexe dois pontos (:) após o nome da família de fontes, seguidos por uma lista de palavras-chave de propriedade de eixo em ordem alfabética, um símbolo de arroba (@) e uma ou mais listas de valores dessas propriedades.
Esses exemplos mostram o processo.
| Fontes | Solicitação |
|---|---|
| Crimson Pro (padrão) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Negrito Pro negrito | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Regular e Negrito | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Negrito e Negrito Itálico | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
O Google Fonts lista todos os estilos disponíveis para cada família de fontes.
Estilo padrão
Quando uma solicitação não especificar uma posição ou um intervalo para o eixo, a posição padrão vai ser usada. A posição padrão do eixo itálico é 0 (normal), e o padrão do eixo de peso é 400 (normal).
Para famílias com eixos que não contêm a posição padrão, as solicitações que não especificarem posições para esses eixos vão falhar. Por exemplo, ao solicitar uma família com um eixo de peso de 500 a 900, a posição do peso precisa ser especificada.
Pesos não padrão
Com fontes estáticas, os estilos de peso geralmente são especificados como múltiplos de 100 (por exemplo, 300, 400, 700). As fontes variáveis oferecem os pesos padrão e intermediários. Para renderizar um peso intermediário:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Como otimizar a latência e o tamanho do arquivo
Tenha cuidado com os estilos que você usa. A API fornece os estilos solicitados no conjunto mais compacto de fontes. Solicitar estilos não utilizados pode fazer com que os usuários façam o download de mais dados de fontes do que o necessário, causando mais latência. Se você usar apenas três pesos específicos, defina-os na solicitação como estilos individuais. Se você usar um intervalo contínuo de pesos, especifique esse intervalo na sua solicitação.
Usar a exibição de fonte
A propriedade font-display
permite controlar o que acontece enquanto a fonte ainda está sendo carregada ou
não está disponível. Especificar um valor diferente do auto padrão geralmente é
apropriado.
Transmita o valor desejado no parâmetro display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Como otimizar as solicitações de fontes
Muitas vezes, quando você quer usar uma fonte da Web no seu site ou aplicativo, sabe com antecedência quais letras são necessárias. Isso geralmente ocorre quando você está usando uma fonte da Web em um logotipo ou título.
Nesses casos, considere especificar um valor text= no URL da
solicitação de fonte. Isso permite que o Google Fonts retorne um arquivo de fonte otimizado para
sua solicitação. Em alguns casos, isso pode reduzir o tamanho do arquivo de fonte em até
90%.
Para usar esse recurso, basta adicionar text= à solicitação de API. Por exemplo, se
você estiver usando apenas o Inconsolata no título do seu blog, será possível colocar o título
como o valor de text=. Esta é a aparência da solicitação:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Como acontece com todas as strings de consulta, codifique o valor dos URLs:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Esse recurso também funciona para fontes internacionais, permitindo que você especifique caracteres UTF-8. Por exemplo, ¡Hola! é representado como:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
O parâmetro "text=" só pode ser especificado uma vez. Isso se aplica a todas as famílias na solicitação. Use solicitações de API separadas se precisar de otimizações de texto diferentes em várias famílias.
Como formar URLs de API
Restrição
Como uma observação geral, a API CSS atualizada é mais rigorosa sobre quais solicitações são aceitas do que a API CSS original.
Diretrizes gerais:
- Listar os eixos em ordem alfabética (
en-USlocalidade) - Os grupos de valores do eixo (ou seja, tuplas) precisam ser classificados numericamente
- As tuplas não podem se sobrepor nem tocar (por exemplo,
wght400..500 e 500..600)
Especificação do URL da API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: nome da família de fontes.
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: uma tag de eixo, por exemplo, ital, wdth, wght
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: um valor dentro do intervalo do eixo correspondente.
text: o texto que será exibido na fonte solicitada
display: auto | block | swap | fallback | optional
Suporte a navegadores legados
Navegadores sem suporte a fontes variáveis podem não conseguir mostrar o design conforme esperado. Confira o suporte à fonte variável dos navegadores no caniuse.
Ao praticar a melhoria progressiva,
você pode evitar comportamentos inesperados nesses navegadores mais antigos. Use consultas
@supports no CSS para bloquear recursos de fontes variáveis.
Neste exemplo, queremos usar a ponderação 450 do Markazi Text, mas precisa ser definida como Normal (peso 400) ou Médio (peso 500) quando não há suporte para recursos de fonte variável:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
A solicitação CSS Markazi+Text:wght@450 envia peso 450 para clientes compatíveis com fontes variáveis e pesos 400 e 500 para aqueles que não são. Em geral, os
substitutos em torno do intervalo da solicitação estarão disponíveis em navegadores legados.
| Eixo | Substitutos |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Esses exemplos mostram os estilos que estão disponíveis em navegadores legados para algumas solicitações diferentes.
| Solicitação | Estilos disponíveis em navegadores legados |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Fontes variáveis disponíveis
Você pode encontrar uma tabela com as fontes variáveis disponíveis na API v2 neste link.
Leitura adicional
- Veja uma lista completa de famílias de fontes fornecidas pela API Google Fonts no Google Fonts.
- Saiba mais sobre como a API Google Fonts funciona na página Considerações técnicas.