La solución pasa por agregar la siguiente línea en el código del functions.php
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
Aunque la versión PRO de Elementor contiene la opción desde la administración, muchos usamos la versión básica y nos interesaría optimizar al máximo los tiempos de carga. Por ello esta simple solución hará que nuestras fuentes se carguen con la opción font-display:swap
El atributo font-display: swap
Este atributo de css (también como parámetro en las URLs de Google Fonts) permite que se muestre el texto de la web desde el primer momento, aunque la fuente especificada no se haya cargado todavía. Es una de las prácticas recomendadas en cuanto a optimización de páginas y de las opciones más repetidas como mejora en los tests de velocidad.
En css podemos usar el atributo font-display en las inicializaciones de las fuentes:
@font-face {
font-family: MiFuente;
src: url(/path/to/fonts/MiFuente.woff) format("woff"), url(/path/to/fonts/MiFuente.eot)
format("eot");
font-weight: 400;
font-style: normal;
font-display: fallback;
}Y también soporta cualquiera de los siguientes valores:
font-display: auto; /* Lo que defina el user-agent */
font-display: block; /* Oculta el texto durante la carga de la fuente */
font-display: swap; /* Muestra la fuente alternativa mientras carga la fuente principal y luego las cambia */
font-display: fallback; /* Oculta el texto un momento y muestra la fuente si se ha cargado o la cambia luego */
font-display: optional; /* Como fallback pero el navegador decide si cambia la fuente o se queda con la alternativa */Agregar font-display:swap en la instancia a Google Fonts
Cuando cargamos una fuente de Google Fonts podemos agregarla con el parámetro swap agregándolo en la URL
<link href=»https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700&display=swap» rel=»stylesheet»>