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.
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.
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 |
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
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.,
wght400..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.