¿Por qué instalar fuentes en local?
A la hora de crear una web, lo más habitual es utilizar las fuentes de tu tema de WordPress.
Esas fuentes serán descargadas por medio de peticiones de tu web a un servidor externo (por ejemplo, a Google Fonts) cada vez que se cargue una fuente.
Si tienes dos fuentes y dos variantes (itálica y negrita) hará un total de 4 peticiones.
Cuando instalas tus fuentes en local ya no realizarás peticiones a un servidor externo, lo que te ahorrará tiempo de carga y mejorará la velocidad de tu web.
Personalizar el tipo de fuente que vas a utilizar, te ayudará a diferenciarte de la competencia y a definir un poco más tu marca personal.
Por último, al no cumplir Google con RGPD, tienes dos opciones: modificar tus políticas de privacidad o instalar las fuentes en local.
«… un tribunal alemán dictaminó en febrero de 2022 que toda web que use Google Fonts servidas remotamente desde los servidores de Google está incumpliendo el RGPD».
Vía Ayuda WordPress
Otra razón más para instalar las fuentes en local.
Pasemos a ver cómo se instalan las fuentes en Elementor
Formatos de tipografía web
A la hora de descargar una fuente debes fijarte en el formato que tiene:
- WOFF: Es el formato más compatible con la mayoría de los navegadores.
- WOFF 2: Evolución del anterior con un mayor nivel de compresión.
Si solo vas a utilizar un formato, elige este. - EOT: Creado por Microsoft, reconocible para versiones anteriores a IE9.
- TTF: Útil para navegadores antiguos.
Font Squirrel es una de las mejores páginas de fuentes para descargar.
Añadir fuentes a Elementor
Elementor Free no tiene la opción de tipografías personalizadas para utilizar fuentes que no estén en el sistema o en Google Fonts.
Una opción es utilizar plugin Custom Fonts, que podemos instalar desde WordPress.
Una vez instalado, subimos las fuentes que vamos a utilizar (previamente la habremos descargado de Font Squirrel o similar) y sus formatos.
Si solo subes un formato, elige WOFF2.
Configura la visualización de la fuente a Swap, para que use una fuente alternativa hasta que la fuente personalizada se haya cargado completamente.
Estilo > Tipografía de tu widget se mostrará la fuente que hemos descargado y subido a nuestro sitio con Custom Fonts.
Añadir fuentes Elementor Pro
Para instalar fuentes en Elementor Pro, hay que ir a Elementor > Tipografías Personalizadas > Añadir nuevo.
Añadimos el nombre, el peso, el estilo de la fuente.
Subimos los diferentes formatos que vamos a utilizar y hacemos clic en publicar.
Como podéis ver, no existe la opción de configurar la propiedad CSS font-display: Swap para las fuentes en local en Elementor Pro, por lo que si nos vamos a Google PageSpeed Insights a analizar el rendimiento de nuestro sitio web, nos dará el siguiente error:
Asegúrate de que el texto permanece visible mientras se carga la fuente web.
Utiliza la característica de CSS «font-display» para que los usuarios vean el texto mientras se carga la fuente web.
Para solucionarlo, si tenemos un tema hijo, nos iremos a Apariencia > Editor de de archivos de temas > functions.php y pegaremos el siguiente código (Fuente: Developers Elementor)
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
De lo contrario, podemos instalar el Code Snippets desde WordPress con el que crearemos un fragmento de código pegando el código anterior.
Ahora ya estamos listos para analizar nuevamente nuestro rendimiento con Google PageSpeed y sin que nos muestre el error anteriormente mencionado.
¿Cómo ver las fuentes que carga nuestra web?
Abrimos el navegador Chrome y nos situamos en la página que vamos a analizar, botón derecho >> inspeccionar
En el inspector seleccionamos Red, marcamos el checkbox Inhabilitar caché y hacemos clic en el apartado Fuente.
Aparte de mostrar las fuentes, mostrará los iconos cagados en la página que son fuentes también y que en vez de contener letras contienen pictogramas.
Otra opción sería analizar nuestro sito web en GTmetrix, e ir a la pestaña Waterfall >> Fonts
2 comentarios
Fue de gran ayuda tu post. Gracias.
Gracias a ti, Álvaro. Un saludo.