Atualização da API CSS

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.

Como deixar a Web bonita

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.

Como deixar a Web bonita
Como deixar a Web bonita

Intervalos dos eixos

Fontes variáveis oferecem faixas contínuas de estilos, geralmente 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
Seu navegador não parece ser compatível com fontes variáveis (caniuse). Em um navegador compatível com variações de fonte, o texto a seguir deve ser renderizado Crimson Pro como um conjunto suave de pesos de 400 a 500. As animações CSS podem fazer o texto variam suavemente o estilo na interação.
Se o navegador for totalmente compatível com fontes variáveis (caniuse), o texto a seguir renderizará o Crimson Pro como um conjunto suave de pesos da de 400 a 500. Animações CSS podem fazer com que o texto varie suavemente o estilo na interação.
Como deixar a Web bonita
Como deixar a Web bonita
Como deixar a Web bonita
Como deixar a Web bonita
Como deixar a Web bonita
Como deixar a Web bonita

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
Parece que seu navegador não oferece suporte a fontes variáveis (caniuse). Em um navegador que não oferece suporte a variações de fonte, o texto a seguir deverá renderizar Crimson Pro com pesos visualmente distintos de 400, 450 e 500.
Se o navegador for totalmente compatível com fontes variáveis (caniuse), o o texto a seguir deve renderizar o Crimson Pro com pesos visualmente diferentes de 400, 450 e 500.
Como deixar a Web bonita
Como deixar a Web bonita
Como deixar a Web bonita

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 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, wght 400..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 consultas em seu 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