Actualización de la API de CSS

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Google Fonts ahora es totalmente compatible con las fuentes variables en la actualización a la API v2. Explicaremos cómo llamar a las familias de fuentes individuales y múltiples, y cómo especificar los rangos de ejes. Para obtener una visión detallada de las fuentes variables, obtén más información con este folleto ilustrado de manera interactiva de David Berlow en TypeNetwork.

Novedades

Todo comienza con una nueva URL base:

https://fonts.googleapis.com/css2

La sintaxis para especificar estilos dentro de cada familia cambió a fin de describir los "espacios de diseño" de fuentes variables.

Guías de inicio rápido

Copia y pega este código HTML en un archivo:

<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>

Con un navegador para abrir el archivo, la página debe renderizar el texto "Making the Web Beautiful" en la fuente Crimson Pro.

Una Web atractiva

Varias familias

A fin de solicitar varias familias, especifica el parámetro family= para cada familia.

Por ejemplo, para solicitar las fuentes Crimson Pro y Literata:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

Copia y pega este código HTML en un archivo:

<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>

Con un navegador para abrir el archivo, la página debe mostrar el texto "Making the Web Beautiful" (en inglés), primero en Crimson Pro y, luego, en Literata.

Una Web atractiva
Una Web atractiva

Rangos de ejes

Las fuentes variables ofrecen rangos continuos de estilos, a menudo sin latencia adicional. Esto es relevante para el diseño responsivo. Esta tipografía dinámica usa rangos continuos de estilos que ofrecen todos los pesos entre 100 y 900 en una página y que varían de forma responsiva según el peso en función de algunas condiciones.

Para solicitar un rango de eje variable de fuente, une los 2 valores con ..

Fuentes Solicitud
Carmesí Pro (wght 200-900) https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
Carmesí Pro cursiva [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Carmesí Pro negrita y [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700
Parece que el navegador no admite fuentes variables (caniuse). En un navegador que sí admite variaciones de fuente, el siguiente texto debería representar Crimson Pro como un conjunto continuo de grosores de 400 a 500. Las animaciones de CSS pueden hacer que el texto varíe sin problemas en el estilo de interacción.
Si tu navegador es totalmente compatible con fuentes variables (caniuse), el siguiente texto debería representar Crimson Pro como un conjunto suave de grosores de 400 a 500. Las animaciones CSS pueden hacer que el texto varíe sin problemas en el estilo de interacción.
Una Web atractiva
Una Web atractiva
Una Web atractiva
Una Web atractiva
Una Web atractiva
Una Web atractiva

Estilos individuales, como el peso

Sin las especificaciones de estilo, la API proporciona el estilo predeterminado de la familia solicitada. Para solicitar otros estilos individuales, como pesos específicos, agrega dos puntos (:) después del nombre de la familia de fuentes, seguido de una lista de palabras clave de propiedad de eje en orden alfabético, un signo de arroba (@) y una o más listas de valores para esas propiedades de eje.

En estos ejemplos, se muestra esto en acción.

Fuentes Solicitud
Carmesí Pro (predeterminado) https://fonts.googleapis.com/css2?family=Crimson+Pro
Carmesí Pro https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
Carmesí Pro y regular https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
Carmesí Pro y negrita en cursiva https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

Google Fonts muestra todos los estilos disponibles para cada familia de fuentes.

Estilo predeterminado

Cuando una solicitud no especifica una posición o un rango para un eje, se usa la posición predeterminada. La posición predeterminada del eje de cursiva es 0 (normal) y el predeterminado para el eje de ponderación es 400 (normal).

Para las familias con ejes que no contienen la posición predeterminada, las solicitudes que no especifican las posiciones de esos ejes fallarán. Por ejemplo, cuando se solicita una familia con un eje de peso de 500 a 900, se debe especificar la posición del peso.

Pesos no estándar

Con las fuentes estáticas, los estilos de los grosores se suelen especificar como múltiplos de 100 (p.ej., 300, 400, 700). Las fuentes variables ofrecen tanto las ponderaciones estándar como las intermedias. Para renderizar un peso intermedio, haz lo siguiente:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Parece que tu navegador no admite fuentes variables (caniuse). En un navegador que sí admite variaciones de fuente, el siguiente texto debe mostrar Crimson Pro con tamaños de 400, 450 y 500 visualmente distintos.
Si tu navegador es totalmente compatible con fuentes variables (caniuse), el siguiente texto debe mostrar Crimson Pro en tamaños visualmente distintos de 400, 450 y 500.
Una Web atractiva
Una Web atractiva
Una Web atractiva

Optimiza la latencia y el tamaño de los archivos

Sea preciso acerca de los estilos que usa. La API ofrece los estilos solicitados en el conjunto de fuentes más compacto. Solicitar estilos sin usar puede hacer que los usuarios descarguen más fuentes de los que necesitan, lo que causa más latencia. Si solo usas 3 ponderaciones específicas, especifícalas en tu solicitud como estilos individuales. Si usas un rango de pesos continuo, debes especificarlo en tu solicitud.

Cómo usar font-display

La propiedad font-display te permite controlar lo que sucede cuando la fuente se está cargando o no está disponible. En general, se recomienda especificar un valor distinto del auto predeterminado.

Pasa el valor deseado en el parámetro display:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

Cómo optimizar tus solicitudes de fuente

A menudo, cuando deseas usar una fuente web en tu sitio o aplicación, sabes de antemano qué letras necesitarás. Esto suele ocurrir cuando usas una fuente web en un logotipo o encabezado.

En estos casos, debes especificar un valor text= en la URL de tu solicitud de fuente. Esto permite que Google Fonts muestre un archivo de fuentes optimizado para tu solicitud. En algunos casos, esto puede reducir el tamaño del archivo de la fuente hasta en un 90%.

Para usar esta función, agrega text= a tu solicitud a la API. Por ejemplo, si solo usas Inconsolata para el título de tu blog, puedes asignarle el título como valor de text=. Así se vería la solicitud:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Al igual que con todas las cadenas de consulta, debes codificar el valor de la URL:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

Esta función también se puede utilizar con fuentes internacionales, lo que te permite especificar caracteres UTF-8. Por ejemplo, ¡Hello! se representa de la siguiente manera:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

Crea URL de API

Estricto

Como nota general, la API de CSS actualizada es más estricta sobre las solicitudes que se aceptan que la API de CSS original.

Lineamientos generales:

  • Enumerar los ejes alfabéticamente (en-US configuración regional)
  • Los grupos de valores de ejes (es decir, tuplas) deben ordenarse numéricamente
  • Las tuplas no pueden superponerse o tocarse (p. ej., wght 400.500 y 500.600)

Especificación de URL de API

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name: Nombre de la familia de fuentes

axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis: Una etiqueta de eje, p.ej., 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: un valor dentro del rango del eje correspondiente

text: Es el texto que se mostrará en el tipo de letra solicitado.

display: auto | block | swap | fallback | optional

Compatibilidad con navegadores heredados

Es posible que los navegadores sin compatibilidad con fuentes variables no puedan mostrar tu diseño según lo previsto. Verifica la compatibilidad de fuentes variables del navegador en caniuse.

Si practicas la mejora progresiva, puedes evitar el comportamiento inesperado en esos navegadores más antiguos. Usa consultas @supports en tu CSS para controlar las características de la fuente variable.

En este ejemplo, queremos usar el grosor 450 del texto de Markazi, pero tendremos que recurrir a Regular (peso 400) o medio (peso 500) cuando no se admitan las funciones de fuentes variables:

<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>

La solicitud Markazi+Text:wght@450 de CSS envía el peso 450 a los clientes que admiten fuentes variables y los pesos 400 y 500 a aquellos que no lo son. En general, los resguardos relacionados con el rango de tu solicitud estarán disponibles en navegadores heredados.

Axis Resguardos
ital 0, 1
wght 100, 200, 300, 400, 500, 600, 700, 800, 900.

Estos ejemplos muestran qué estilos estarán disponibles en los navegadores heredados para algunas solicitudes diferentes.

Solicitud Estilos disponibles en navegadores heredados
ital@0 ital@0
wght@500 wght@500
wght@432 wght@400;500
wght@440..560 wght@400;500;600

Fuentes de variables disponibles

Puedes encontrar una tabla de fuentes variables disponibles en la API v2 aquí.

Lecturas adicionales

  • Consulta una lista completa de las familias de fuentes que proporciona la API de Google Fonts en Google Fonts.
  • Obtén más información sobre cómo funciona la API de Google Fonts en la página de consideraciones técnicas.