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">