Analiza visualmente cómo responden los navegadores al cargar tipografías web y genera el código CSS optimizado.
En el desarrollo web moderno, las fuentes tipográficas personalizadas juegan un papel decisivo en el diseño visual y la identidad de marca. Sin embargo, su descarga a través de la red introduce retos críticos en el rendimiento y la experiencia del usuario (UX). Nos encontramos con dos problemas clásicos:
La propiedad font-display nos da un control preciso sobre la escala temporal dividida en tres periodos: el periodo de bloqueo (texto invisible), el periodo de intercambio (fuente del sistema que se puede reemplazar) y el periodo de fallo (la fuente personalizada se ignora si tarda demasiado).
Es una regla CSS que permite controlar cómo se comportan las fuentes descargables mientras se cargan, reduciendo problemas de rendimiento visual como FOIT (texto invisible) y FOUT (parpadeo de texto no estilizado).
Con swap, la página muestra inmediatamente una fuente de sistema y la reemplaza por la fuente web en cuanto termina de descargar. Con optional, si la fuente web tarda en cargar, el navegador se queda con la fuente de sistema para evitar saltos de diseño (CLS).
Impacta principalmente al LCP (Largest Contentful Paint) al agilizar la renderización del texto inicial, y al CLS (Cumulative Layout Shift) evitando cambios bruscos en el diseño cuando se intercambian fuentes con diferentes métricas tipográficas.