Si eres nuevo en WordPress, es posible que no domines todavía todos los conceptos que su uso engloba. ¡Tranquilo! Estás en el lugar adecuado para conocer qué son las fuentes variables y la importancia del uso de ellas en tu página web de WordPress.
Si en tu sitio web usas una sola fuente sin variación en el peso, la altura o el espacio, no estás aprovechando al máximo tus posibilidades, y tampoco sorprenderás a tus lectores. Es por eso que necesitas usar fuentes variables en su sitio. Incluso si eliges usar solo un tipo de fuente, puedes llegar a modificarla lo suficiente a través de CSS para que funcionalmente se convierta en una multitud de opciones de fuentes.
Vamos a conocer un poco más qué son las fuentes variables y por qué debes usarlas.
¿Qué es una fuente variable en WordPress?
Aunque muchas veces se utiliza de forma indistinta a la hora de hablar de tipos de letra (que de hecho, es otro término que puede llevar a la confusión) tipografía y fuente son términos diferentes.
La tipografía hace referencia a toda una familia de diseños de letras, como por ejemplo la muy conocida “Montserrat”.
Sin embargo, la fuente es cada uno de los archivos que compone esa familia de la tipografía. Por ejemplo, siguiendo con la tipografía Montserrat, algunas fuentes de esta familia serían “Monserrat Bold”, “Monserrat Regular” o “Monserrat Italic”.
De ese modo, las fuentes variables son fuentes únicas que pueden ser modificadas por CSS de acuerdo con 5 criterios o ejes diferentes. Cada eje controla una faceta concreta de la apariencia de ese tipo de fuente y tiene una etiqueta CSS correspondiente, que puede ser:
- Peso ( wght en CSS)
- Inclinación ( slnt en CSS)
- Cursiva ( ital en CSS)
- Tamaño óptico ( opsz en CSS)
- Ancho ( wght en CSS)
Finalmente se encuentra el pseudo eje personalizado de nombre Grado, presentado como GRAD en CSS. Cuando combinas todos estos ejes diferentes, puedes hacer que cualquier tipo de letra haga prácticamente cualquier cosa que desee hacer, incluso animaciones tipo SVG.
¿Por qué utilizar fuentes variables?
La respuesta corta es que las fuentes variables son mucho más eficientes que incrustar y renderizar varias fuentes en un sitio web.
Permiten almacenar mayor cantidad de información en un archivo de fuente, de forma que si deseas variaciones en una (hacerla negrita, cursiva, etc.), no tienes por qué cargar diferentes archivos de fuente, sino que puedes hacerlo desde uno solo.
Por ejemplo, para una fuente con varios pesos de fuente, estilos e inclinaciones, esta ventaja podría ahorrar mucho espacio de archivo y hacer más fácil todo el proceso de encolar la fuente o añadirla.
El único inconveniente es que estas fuentes variables sí son compatibles con las últimas versiones de Chrome, Edge, Firefox y Safari, pero no con los navegadores o actualizaciones más antiguas, por lo tanto, si estás dispuesto a utilizarlas, primero necesitarás una copia de seguridad.
Por otro lado, no existen una gran variedad de fuentes variables disponibles, aunque los desarrolladores de fuentes siguen trabajando para ofrecer más opciones.
