✅Como Solucioné el Problema de «flasheo» de Tipografía en mi Web

Hoy quiero contarte cómo solucioné un problema clásico que ocurre en muchas webs hechas con WordPress: ese molesto «parpadeo» o «flasheo» de las fuentes al cargar la página.

Durante unos milisegundos, al cargar cualquier página, el texto se mostraba con una tipografía estándar (tipo «sans-serif» del sistema) y luego, de repente, aparecía la fuente correcta, en mi caso Outfit. Esto es lo que se conoce como FOIT o FOUT, y hoy te cuento cómo lo solucioné de forma definitiva.

El contexto: uso Blocksy gratuito y Google Fonts

Mi web está creada con el tema Blocksy (versión gratuita), que es un tema súper ligero y versátil y con código personalizado puedo adaptar el tema a lo que necesite. El problema es que Blocksy, como muchos otros temas, carga Google Fonts directamente desde los servidores de Google. Y aunque Blocksy Pro tiene una opción para servir las fuentes localmente, yo no uso la versión Pro.

Por suerte, hay una solución manual y sencilla para que las fuentes se sirvan desde tu propio servidor y no desde Google, evitando ese «flasheo» incómodo.

¿Cuál era el problema exactamente?

Cuando cargaba la web, durante unos milisegundos, la tipografía Outfit no estaba lista y el navegador mostraba una fuente por defecto (sans-serif). Luego, cuando Google Fonts terminaba de cargar, la fuente Outfit se aplicaba correctamente, provocando un pequeño salto visual.

Esto es lo que se llama un FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text).

¿Cómo lo solucioné?

Te explico el paso a paso que seguí para cargar Outfit desde mi servidor y eliminar el problema.

Paso 1: Descargar la fuente desde Google Fonts

Lo primero fue ir a Google Fonts – Outfit y descargar el ZIP completo con la familia de fuentes.

Paso 2: Seleccionar solo las variantes necesarias

En mi caso solo necesitaba:

• Outfit-Regular (400) para el texto base.
• Outfit-Bold (700) para los encabezados (H1, H2, H3…).

Así que seleccioné solo esos dos archivos .ttf.

Paso 3: Convertir la fuente a formato .woff2

Para que las fuentes carguen más rápido en la web, las convertí de .ttf a .woff2 usando una herramienta online gratuita: 👉 https://cloudconvert.com/ttf-to-woff2

De ahí obtuve:

• Outfit-Regular.woff2
• Outfit-Bold.woff2

Paso 4: Subir las fuentes al tema hijo

Yo como estoy usando un tema hijo de Blocksy, creé una carpeta nueva dentro de él:

/wp-content/themes/blocksy-child/fonts/

Subí ahí los dos archivos .woff2.

Paso 5: Añadir el CSS para declarar la fuente

Decidí agregar el código en el CSS adicional desde el Personalizador de WordPress (Apariencia > Personalizar > CSS adicional), aunque también se podría hacer en el style.css del tema hijo.

Este es el código que usé:

@font-face {
    font-family: 'Outfit';
    src: url('/wp-content/themes/blocksy-child/fonts/Outfit-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/wp-content/themes/blocksy-child/fonts/Outfit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Outfit', sans-serif;
}

Paso 6: Preload de la fuente desde functions.php

Para que la fuente se cargue aún más rápido, añadí un pequeño código PHP en el functions.php del tema hijo (o se puede hacer también con Code Snippets):

add_action('wp_head', function() {
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/Outfit-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">' . "\n";
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/Outfit-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">' . "\n";
});Lenguaje del código: PHP (php)

Paso 7: Bloquear Google Fonts de Blocksy

Ya que Blocksy gratuito no tiene la opción para desactivar Google Fonts desde el personalizador, lo solucioné con este filtro en el functions.php:

add_filter('blocksy:google-fonts:load', '__return_false');Lenguaje del código: PHP (php)

Con esto le dije a Blocksy: «No cargues más Google Fonts, que ya las sirvo yo desde el servidor».

Resultado final

• Outfit ya no se carga desde Google, sino desde mi propio servidor.
• El «flasheo» de tipografía al cargar la web ha desaparecido.
• Mejoré la percepción de velocidad y la experiencia del usuario.

Nota: ¿Y los anuncios?

En mi caso, tengo anuncios de Google Adsense que solo se muestran a usuarios no registrados, y esos anuncios sí cargan sus propias Google Fonts desde los servidores de Google. Esto es normal porque los anuncios de Google Ads o redes similares usan sus propias fuentes y no puedo evitarlo, pero mi contenido principal ya no depende de Google Fonts.

Conclusión

Aunque Blocksy Pro tiene la opción de servir fuentes locales automáticamente, con este proceso logré hacerlo manualmente en la versión gratuita y eliminar por completo el FOIT.

Si te pasa algo parecido en tu web, esta es una forma sencilla y efectiva de solucionarlo, incluso si usas cualquier otro tema o builder.