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 de la API v2. Explicaremos cómo llamar a familias de fuentes individuales y múltiples, y cómo especificar rangos de ejes. Para obtener información detallada sobre 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

Se modificó la sintaxis para especificar estilos dentro de cada familia a fin de describir los "espacios de diseño" de la fuente variable.

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" (Cómo crear una Web atractiva), en la fuente Crimson Pro.

¡Hermosa Web!

Varias familias

Para solicitar varias familias, especifica el parámetro family= para cada familia.

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

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.

¡Hermosa Web!
¡Hermosa Web!

Rangos de ejes

Las fuentes variables ofrecen rangos de estilos continuos, a menudo sin latencia adicional. Esto es relevante para el diseño responsivo. Esta tipografía dinámica utiliza rangos de estilos continuos, ofrece todos los pesos entre 100 y 900 en una página y varía de manera receptiva según el estado del peso.

Para solicitar un rango de eje de fuente variable, 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 en cursiva [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 a Carmesí Pro como un conjunto fluido de grosores de 400 a 500. Las animaciones de CSS pueden hacer que el texto fluya sin problemas en el estilo de interacción.
Si tu navegador es totalmente compatible con fuentes variables (caniuse), el siguiente texto debería procesar Crimson Pro como un conjunto fluido de ponderaciones de 400 a 500. Las animaciones de CSS pueden hacer que el texto fluya sin inconvenientes en el estilo de interacción.
¡Hermosa Web!
¡Hermosa Web!
¡Hermosa Web!
¡Hermosa Web!
¡Hermosa Web!
¡Hermosa Web!

Estilos individuales, como el peso

Sin 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, seguidos de una lista de palabras clave de propiedades de ejes en orden alfabético, un signo de unión (@) y una o más listas de valores para esas propiedades de ejes.

Estos ejemplos lo demuestran 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 Regular &negrita https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
Carmesí Pro Negrita y negrita en cursiva https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

En Google Fonts, se enumeran 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 usará la posición predeterminada. La posición predeterminada del eje en cursiva es 0 (normal) y el predeterminado para el eje de peso es 400 (normal).

Para las familias con ejes que no contienen la posición predeterminada, las solicitudes que no especifican posiciones para 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 grosor se suelen especificar como múltiplos de 100 (p.ej., 300, 400, 700). Las fuentes variables ofrecen las ponderaciones estándar y las intermedias. Para renderizar un peso intermedio, haz lo siguiente:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Tu navegador no parece admitir fuentes variables (caniuse). En un navegador que admite variaciones de fuente, el siguiente texto debería procesar Crimson Pro con tamaños visualmente distintos de 400, 450 y 500.
Si tu navegador es compatible con fuentes variables (caniuse), el siguiente texto debería procesar Crimson Pro con pesos visualmente distintos de 400, 450 y 500.
¡Hermosa Web!
¡Hermosa Web!
¡Hermosa Web!

Cómo optimizar la latencia y el tamaño del archivo

Sea preciso acerca de los estilos que utiliza. La API entrega los estilos solicitados en el conjunto de fuentes más compacto. La solicitud de estilos sin utilizar puede hacer que los usuarios descarguen más datos de fuente que los que necesitan, lo que causa más latencia. Si solo usas 3 pesos específicos, especifícalos en tu solicitud como estilos individuales. Si usas un rango continuo de pesos, especifica ese rango en tu solicitud.

Cómo usar la fuente y la pantalla

La propiedad font-display te permite controlar lo que sucede mientras la fuente se carga o no está disponible. Por lo general, es adecuado especificar un valor distinto del auto predeterminado.

Pasa el valor deseado al parámetro display:

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

Cómo optimizar tus solicitudes de fuente

A menudo, cuando quieres 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 considerar especificar un valor text= en la URL de solicitud de fuente. Esto permite que Google Fonts muestre un archivo de fuente optimizado para tu solicitud. En algunos casos, esto puede reducir el tamaño del archivo de fuente hasta en un 90%.

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

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

Al igual que con todas las strings 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!

Cómo crear URL de API

Estricta

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:

  • Mostrar los ejes alfabético (en-US configuración regional)
  • Los grupos de valores del eje (es decir, las tuplas) deben ordenarse numéricamente
  • Las tuplas no se pueden superponer ni tocar (p. ej., wght 400.500 y 500.600).

Especificación de URL de la API

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

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

family_name: El 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: 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 que no admiten fuentes variables no puedan mostrar tu diseño según lo previsto. Verifica la compatibilidad de fuentes variables del navegador en caniuse.

Mediante la práctica de la mejora progresiva, puedes evitar el comportamiento inesperado en esos navegadores más antiguos. Usa consultas @supports en tu CSS para controlar las funciones de fuente variables.

En este ejemplo, queremos usar el grosor 450 del texto de Markazi, pero tendremos que volver a Regular (peso 400) o Medio (peso 500) cuando no se admiten los atributos de fuente variable:

<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 hacen. En general, los resguardos relacionados con el rango de tu solicitud estarán disponibles en los navegadores heredados.

Axis Resguardos
cursiva 0, 1
pene 100, 200, 300, 400, 500, 600, 700, 800 y 900

Estos ejemplos muestran qué estilos estarían 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 variables disponibles

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

Lecturas adicionales

  • Consulta la lista completa de 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 Consideraciones técnicas.