Una característica que puede influir en el rendimiento de tu sitio es el forma en la que se carga la fuente. Esto se soluciona con una porpiedad sencilla en css sin embargo cuando no estás trabajando con una maquetador como Elementor esperas que esto no sea un problema. Entonces… cómo incluir la propiedad font-display: swap en elementor.
Entra en el archivo functions.php de tu tema e incluye:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );Guarda los cambios y luego ve a la sección Elementor > Tools y haz clic en Regenerar archivos y datos.
Por defecto esta propiedad aparece en valor «auto», con la función anterior puedes cambiarla de acuerdo a lo que necesites: block, swap, fallback, optional. Sin embargo, para mejorar la velocidad de tu sitio te recomendamos mantenerla siempre como font-display:swap
Sin embargo, por temas relacionados con tu diseño es posible que necesites que algo se vea SOLO con una fuente específica. Con la función anterior puedes resolverlo. Si te fijas también acepta otros parámetros que te permitirán personalizar la forma que se deben mostrar tus fuentes. Por ejemplo:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
if ( 'Poppins' === $font_family ) {
$current_value = 'swap';
}
return $current_value;
}, 10, 3 );Por qué es importante tener en cuenta esto. Pues es una buena práctica según Google el mantener el texto visible durante todo momento, y la carga de la fuente siempre tendrá un cierto retraso para ser cargada.
