O Google Fonts agora é totalmente compatível com fontes variáveis na atualização da API v2. Vamos explicar como chamar famílias de fontes únicas e múltiplas e como especificar intervalos de eixos. Para mais detalhes sobre fontes variáveis, consulte este folheto ilustrado interativamente de David Berlow na TypeNetwork.
Novidades
Tudo começa com um novo URL de base:
https://fonts.googleapis.com/css2
A sintaxe para especificar estilos dentro de cada família foi alterada para descrever fonte variável "espaços de design".
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 deve renderizar o texto: "Tornar o Bela Web”, 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 “Making the Web Beautiful”, primeiro em Crimson Pro e depois em Literata.
Intervalos dos eixos
Fontes variáveis oferecem intervalos contínuos de estilos, muitas vezes sem latência de rede. Isso é relevante para o design responsivo. Essa tipografia dinâmica usa intervalos contínuos de estilos, oferecendo todas as pesos entre 100 e 900 em uma página e variar de forma responsiva o peso com base em algumas condições.
Para solicitar um intervalo para um eixo de fonte variável, mescle os dois valores com ...
| Fonte(s) | Solicitação |
|---|---|
Profissional carmim [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Carimson Pro Itálico [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Carmim Pro Negrito Itálico e [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Estilos individuais, como peso
Sem as especificações de estilo, a API fornece o estilo padrão “família solicitada”. Para solicitar outros estilos individuais, como pesos específicos, adicione dois-pontos (:) após o nome da família de fontes, seguido por uma lista de eixos palavras-chave de propriedade em ordem alfabética, um sinal de arroba (@) e uma ou mais listas de valores para as propriedades do eixo.
Esses exemplos mostram isso em ação.
| Fonte(s) | Solicitação |
|---|---|
| Carmson Pro (padrão) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Carmim 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 |
| Carmim Pro Bold & 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 especifica uma posição ou intervalo para um eixo, o padrão será usada. A posição padrão do eixo de itálico é 0 (normal) e o padrão para o eixo de peso é 400 (regular).
Para famílias com eixos que não contêm a posição padrão, as solicitações que não não especificar posições para esses eixos. Por exemplo, ao solicitar um família com um eixo de peso entre 500 e 900, a posição do peso deve ser especificado.
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 mesmos pesos pesos 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
Seja preciso em relação aos estilos que está usando. A API envia os estilos solicitados no conjunto mais compacto de fontes. Solicitar estilos não usados pode fazer com que seus usuários façam o download de mais dados de fonte do que o necessário, causando mais latência. Se você usa apenas Três pesos específicos, especifique-os na sua solicitação como estilos individuais. Se você use um intervalo contínuo de pesos, especifique esse intervalo de peso em sua solicitação.
Usar a exibição de fontes
O comando font-display
permite controlar o que acontece enquanto a fonte ainda está sendo carregada ou
de outra forma indisponível. Especificar um valor diferente do auto padrão é
geralmente apropriados.
Transmita o valor pretendido ao parâmetro display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Como otimizar suas solicitações de fonte
Muitas vezes, quando você quer usar uma fonte da Web em seu site ou aplicativo, saber com antecedência de quais cartas você precisará. Isso geralmente ocorre quando você está usando um fonte da Web em um logotipo ou título.
Nesses casos, especifique um valor text= na fonte.
URL de solicitação. 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 da fonte em até
90%.
Para usar esse recurso, basta adicionar text= à sua solicitação de API. Por exemplo, se
está usando apenas o Inconsolata para o título do seu blog, você pode colocar o título
a si mesmo como o valor de text=. Veja como seria a solicitação:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Assim como acontece com todas as strings de consulta, codifique o valor para URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Esse recurso também funciona para fontes internacionais, permitindo que você especifique UTF-8 caracteres. Por exemplo, ¡Hola! é representada como:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Observe que o 'text=' só pode ser especificado uma vez. Sujeito a a todas as famílias da solicitação. Use solicitações de API separadas se precisar diferentes otimizações de texto em várias famílias.
Formar URLs de API
Rigidez
Como observação geral, a API CSS atualizada é mais rigorosa sobre quais solicitações são aceito do que a API CSS original.
Diretrizes gerais:
- Listar eixos em ordem alfabética (localidade
en-US) - Grupos de valores de eixo (ou seja, tuplas) precisam ser classificados numericamente
- As tuplas não podem se sobrepor ou 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 e 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 no intervalo do eixo correspondente
text: o texto que será exibido na família tipográfica solicitada
display: auto | block | swap | fallback | optional
Suporte a navegadores legados
Navegadores sem suporte a fontes variáveis podem não conseguir exibir seu design como pretendido. Confira a compatibilidade com fontes variáveis dos navegadores no caniuse (link em inglês).
Ao praticar o aprimoramento progressivo,
você pode evitar comportamentos inesperados nesses navegadores mais antigos. Usar o @supports
no CSS para bloquear recursos de fontes variáveis.
Neste exemplo, gostaríamos de usar o peso 450 do Texto Markazi, mas temos que retornar para Normal (peso 400) ou Médio (peso 500) quando a variável recursos de fonte não são compatíveis:
<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 de CSS Markazi+Text:wght@450 envia peso 450 aos clientes que oferecem suporte
fontes variáveis e pesos 400 e 500 aos que não têm. Em geral, o
os substitutos no intervalo da solicitação estarão disponíveis nos navegadores legados.
| Eixo | Substitutos |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800 e 900 |
Estes exemplos mostram os estilos disponíveis em navegadores legados por alguns 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
Uma tabela das fontes variáveis disponíveis na API v2 pode ser encontrada aqui.
Leitura adicional
- Confira uma lista completa de famílias de fontes fornecidas pela API Google Fonts em Fontes do Google.
- Saiba mais sobre como a API Google Fonts funciona no Considerações técnicas.