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.
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.
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 |
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
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!
Ten en cuenta que el parámetro 'text=' solo se puede especificar una vez. Se aplica a todas las familias de la solicitud. Usa solicitudes de API separadas si necesitas optimizaciones de texto diferentes en varias familias.
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-USconfiguración regional) - Los grupos de valores de ejes (es decir, tuplas) deben ordenarse numéricamente
- Las tuplas no pueden superponerse o tocarse (p. ej.,
wght400.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.