¿Cómo puedo utilizar fuentes variables con Google Fonts?
A diferencia de las fuentes tradicionales que requieren un archivo para cada peso (300, 400, 500, etc.), las fuentes variables te permiten acceder a cada combinación de pesos y estilos de la fuente a través de un único archivo de fuente (más pequeño). Esto tiene beneficios obvios para la web, y estoy tratando de usar la fuente “Inter” de Google Fonts, que tanto Google como el sitio web del diseñador afirman ser una fuente variable.
Sin embargo, al seleccionar la fuente en Google Fonts, todavía se requiere seleccionar los pesos individuales que se desean utilizar, y la etiqueta <link> generada también especifica los pesos individuales, lo que sugiere que se están descargando cada uno de esos archivos:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
También he notado que parece que no viene con itálicas, y cuando intento renderizarlas, las simula con itálicas falsas, lo cual confirmé agregando la regla CSS font-synthesis:none:
font-style: italic;
font-synthesis: none ; /* Desactiva las itálicas falsas y otros estilos simulados:
si no está instalado el estilo itálico, se muestra el estilo normal por defecto */
¿Por qué sucede esto y cómo puedo usar la versión variable de “Inter” a través de Google Fonts, incluyendo las itálicas?
davy.ai
Es importante tener en cuenta que el hecho de que una fuente esté etiquetada como una fuente variable no significa necesariamente que funcionará como tal en todo contexto. En el caso de la fuente Inter de Google Fonts, aunque técnicamente es una fuente variable, es posible que no sea totalmente compatible con todas las funcionalidades de una fuente variable.
Como has notado, al seleccionar la fuente Inter en Google Fonts, aún debes elegir pesos individuales para incluir en tu hoja de estilos. Esto sugiere que aunque la fuente técnicamente puede generar cualquier combinación de pesos o estilos, es posible que Google Fonts no haya implementado esa funcionalidad en su API.
Adicionalmente, mencionaste que la fuente no parece tener cursivas verdaderas y en su lugar utiliza cursivas simuladas. Esto puede deberse a una limitación de la fuente en sí misma, o puede ser una elección deliberada del diseñador de la fuente. De cualquier manera, esto significa que es posible que no puedas utilizar cursivas verdaderas con esta fuente.
Dicho esto, puede haber soluciones alternativas que te permitan utilizar la fuente Inter como una fuente variable con todos sus pesos y estilos disponibles. Una solución potencial podría ser descargar los archivos de fuente directamente desde el sitio web del diseñador e incluirlos manualmente en tu proyecto. Esto te daría más control sobre qué pesos y estilos incluir y cómo acceder a ellos.
Otra opción podría ser utilizar una fuente diferente que sea totalmente compatible con la funcionalidad de fuente variable, o utilizar archivos de fuente separados para cada peso y estilo que necesites. Aunque esto puede implicar más descargas de archivos y un tamaño de archivo general más grande, aseguraría que tengas acceso a todos los pesos y estilos que requieras.
En general, es importante considerar cuidadosamente las limitaciones y especificaciones de cualquier fuente que planees utilizar antes de integrarla en tu proyecto. Aunque las fuentes variables pueden ser una herramienta poderosa para los diseñadores web, no siempre funcionarán como se espera en todos los contextos.