Cómo añadir fuentes en Elementor

Añadir fuentes Elementor
Facebook
Twitter

Tabla de contenidos

¿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.

Página para descargar fuentes

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.

Instalación custom fonts

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.

Configuración Custom Fonts

Estilo > Tipografía de tu widget se mostrará la fuente que hemos descargado y subido a nuestro sitio con Custom Fonts.

Instalando fuente Poppins

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.

Añadir fuente Action Man

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.

Ver fuentes cargadas en el inspector de Chrome

Otra opción sería analizar nuestro sito web en  GTmetrix, e ir a la pestaña Waterfall >> Fonts

Ver las fuentes cargadas en GTmetrix

Te puede interesar...

2 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información sobre protección de datos

  • Responsable: Ramón Alonso
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: info@ramonalonso.com.

Acepto la política de privacidad