Última revisión: 31 de diciembre de 2021
Carga de Fuentes
Desde hace un tiempo que gracias al mecanismo de font-face del CSS podemos usar casi cualquier tipografía que queramos en nuestro sitio web, pero este sistema implica ciertas limitaciones.
Cada sistema operativo dispone de unas fuentes de sistema que son con las que, habitualmente se cargan los sitios web. Ahora, mediante este sistema, podemos cargar las fuentes que queramos, pero eso implica hacer una llamada a un fichero externo y descargar la fuente para que pueda ser ejecutada por el navegador. Y en ocasiones las fuentes pueden tener un peso excesivo, dependiendo de la conexión a Internet que tengamos.
Dependiendo del tipo de navegador que usemos, el comportamiento de carga es distinto:
- Chrome: Oculta por defecto el texto de toda la web durante 3 segundos a menos que la fuente se haya cargado. Si tras 3 segundos sigue sin haberse cargado, mostrará una tipografía de sistema. Posteriormente hará el cambio.
- Edge: Usa una Fuente de Sistema desde el primer momento hasta que la fuente se haya cargado. Posteriormente hará el cambio.
- Firefox: Oculta por defecto el texto de toda la web durante 3 segundos a menos que la fuente se haya cargado. Si tras 3 segundos sigue sin haberse cargado, mostrará una tipografía de sistema. Posteriormente hará el cambio.
- Safari: Oculta todo el texto hasta que la fuente esté disponible.
Este comportamiento por defecto hace que la carga de la página haga “cosas raras” si no se plantea correctamente. Por eso lo mejor es forzar que el cambio se haga cuando la fuente esté, pero previamente se muestre el texto con una fuente de sistema y la web sea interactiva. Para ello, añadiremos el valor del font-display del CSS en modo swap.
@font-face {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-display: swap;
}Si eres de los que utiliza Google Fonts, puedes aplicar esta mejora también ya que han incorporado la posibilidad de cargarla mediante un parámetro.
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">Añadir tipografías a WordPress
WordPress está integrando una API Webfont para la gestión de fuentes al más puro estilo Google Fonts de forma nativa, ya que hasta ahora esta gestión quedaba relegada a los temas o a plugins.
Tipografías en temas
A la hora de añadir una fuente externa a un tema tenemos distintas maneras de hacerlo.
Lo primero es separar aquellas fuentes que tenemos en nuestro propio sitio (es decir, que tenemos los ficheros alojados nosotros) y que se cargarían mediante una llamada de font-face desde el CSS.
En este caso, es importante que la carga se haga de forma separada al resto de CSS y que se haga de forma asíncrona si es posible o incluyendo un sistema de swap.
La segunda manera de cargar fuentes suele ser mediante el sistema de personalización de los temas que permiten incluir una fuente de Google u otro proveedor. En estos casos el sistema suele incluir la fuente ya de forma correcta mediante un sistema de swap, pero suele incluirlo en la misma hoja de estilo, lo que hace que la carga pueda bloquear.
Es importante que, en el momento que WordPress incorpore la API de Webfont, tu tema utilice este sistema para que se puedan usar herramientas de optimización.
Tipografías en plugins
Para aquellos temas que no incorporan una gestión de tipografías, existen infinidad de plugins que permiten añadir una fuente de este proveedor mediante una serie de menús desplegables.
En este caso, al ser un plugin el que gestiona la carga de los CSS, por norma general usará el sistema de encolado de CSS y añadirá la fuente al listado de CSS.
Este sistema puede no ser óptimo, ya que no priorizará la carga del CSS de la fuente como primer elemento, lo que puede provocar un bloqueo de la carga.
