Actualización de la API de CSS

Google Fonts ahora es totalmente compatible con las fuentes variables en la actualización de la API v2. Más tarde explicar cómo llamar a una o varias familias de fuentes y cómo especificar de ejes. Para obtener más información sobre las fuentes variables, obtén más información en este folleto ilustrado interactivo 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ó para describir de la fuente variable “espacios de diseño”.

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>

Al usar un navegador para abrir el archivo, la página debe renderizar el texto "Haciendo Web Beautiful”, en la fuente Crimson Pro.

¡Una Web hermosa!

Varias familias

Para 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 debería renderizar el texto "Making the Web Beautiful" (Cómo hacer que la Web sea bella), primero en Crimson Pro y luego en Literata.

¡Una Web hermosa!
¡Una Web hermosa!

Rangos de ejes

Las fuentes variables ofrecen rangos continuos de estilos, a menudo, sin restricciones latencia. Esto es relevante para el diseño responsivo. Esta tipografía dinámica usa rangos continuos de estilos y ofrece todas las pesos entre 100 y 900 en una página, y varía el peso de forma responsiva según ciertas condiciones.

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

Fuentes Solicitud
Crimson Pro [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
Crimson Pro Cursiva [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Crimson Pro Bold Cursiva y [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700
Aparentemente, tu navegador no admite fuentes variables (caniuse). En un navegador que sí admita variaciones de fuente, se deberá renderizar el siguiente texto Crimson Pro como un conjunto suave de pesos de 400 a 500 Las animaciones de CSS pueden hacer el texto variará suavemente el estilo durante la interacción.
Si tu navegador es totalmente compatible con las fuentes variables (caniuse), entonces, el siguiente texto debería renderizar Crimson Pro como un conjunto suave de pesos de De 400 a 500. Las animaciones de CSS pueden hacer que el texto varíe suavemente el estilo en la interacción.
¡Una Web hermosa!
¡Una Web hermosa!
¡Una Web hermosa!
¡Una Web hermosa!
¡Una Web hermosa!
¡Una Web hermosa!

Estilos individuales, como el peso

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

Estos ejemplos muestran esto en acción.

Fuentes Solicitud
Crimson Pro (predeterminado) https://fonts.googleapis.com/css2?family=Crimson+Pro
Carmesí Pro Bold https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
Crimson Pro Regular y Negrita https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
Crimson Pro Bold & Negrita 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 en una solicitud no se especifica una posición o rango de un eje, el valor predeterminado una posición. La posición predeterminada del eje de cursiva es 0 (normal) y el valor predeterminado para el eje de peso es 400 (regular).

En el caso de las familias cuyos ejes no contienen la posición predeterminada, las solicitudes que sí si no especificas posiciones para esos ejes, fallarán. Por ejemplo, cuando solicitas un con un eje de peso que va de 500 a 900, la posición del peso debe ser especificada.

Pesos no estándar

Con las fuentes estáticas, los estilos de grosor suelen especificarse como múltiplos de 100 (p.ej., 300, 400, 700). Las fuentes variables ofrecen los grosores estándar y ponderaciones 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í admita variaciones de fuente, el siguiente texto debe renderizarse de color carmesí Pro con pesos visualmente distintos de 400, 450 y 500.
Si tu navegador es totalmente compatible con las fuentes variables (caniuse), el El siguiente texto debe renderizar Crimson Pro con pesos visualmente distintos de 400, 450 y 500.
¡Una Web hermosa!
¡Una Web hermosa!
¡Una Web hermosa!

Optimiza la latencia y el tamaño de los archivos

Sé preciso con respecto a los estilos que utilizas. La API entrega los estilos solicitados en el conjunto de fuentes más compacto. Si solicitas diseños sin usar, es posible que tus usuarios para descargar más datos de la fuente que necesitan, lo que causa más latencia. Si solo usas 3 pesos específicos, especifícalos en tu solicitud como estilos individuales. Si usar un rango continuo de ponderaciones, debes especificarlo en tu solicitud.

Cómo usar la visualización de fuentes

La sección font-display te permite controlar lo que sucede mientras la fuente aún se está cargando o de lo contrario, no estará disponible. Se especifica un valor distinto del auto predeterminado: generalmente es apropiado.

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 fuentes

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

En estos casos, debes considerar especificar un valor text= en tu fuente. la URL de la solicitud. 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 90%

Para usar esta función, simplemente agrega text= a tu solicitud a la API. Por ejemplo, solo estás usando Inconsolata para el título de tu blog, puedes ponerlo como el valor de text=. A continuación, te mostramos cómo 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 como URL el valor:

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

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

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

Ten en cuenta que el 'text=' solo se puede especificar una vez. Aplica a todas las familias de la solicitud. Usa solicitudes a la API separadas si lo necesitas optimizaciones de texto diferentes en múltiples familias.

Cómo formar URLs de API

Estrictidad

Como nota general, la API de CSS actualizada es más estricta con respecto a qué son las solicitudes que la API de CSS original.

Lineamientos generales:

  • Enumera los ejes alfabéticamente (configuración regional en-US)
  • Los grupos de valores de ejes (es decir, tuplas) deben ordenarse numéricamente
  • Las tuplas no se pueden superponer ni tocar (p.ej., wght 400..500 y 500..600)

Especificación de la URL de la 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: Es una etiqueta del eje, p.ej., ital, wdth y 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 como lo previsto. Verifica la compatibilidad de las fuentes variables de los navegadores en caniuse.

Con la mejora progresiva, Puedes evitar comportamientos inesperados en esos navegadores más antiguos. Usa @supports en tu CSS para restringir las funciones de fuentes variables.

En este ejemplo, nos gustaría usar el grosor 450 del texto Markazi, pero debemos puede volver a Regular (peso 400) o Medio (peso 500) cuando la variable no se admiten las siguientes funciones de fuente:

<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 del CSS Markazi+Text:wght@450 envía el peso 450 a los clientes que admiten las fuentes variables y los pesos 400 y 500 a los que no lo hacen. En general, el los resguardos en torno al 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ían disponibles en navegadores heredados para algunos diferentes solicitudes.

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

Aquí encontrarás una tabla con las fuentes variables disponibles en la API v2.

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 Consideraciones técnicas.