Generador de código font-display
Compara los modos de carga de fuentes web (font-display) y genera el @font-face
Esta herramienta muestra en una línea de tiempo visual cómo se comporta realmente cada valor de la propiedad CSS font-display: auto, block, swap, fallback y optional. Solo con el nombre de la fuente y su URL genera el @font-face con el valor elegido. Todo se calcula en el navegador, sin enviar nada a ningún servidor, así que resulta muy útil para desarrolladores front-end y maquetadores que quieren entender los problemas de FOUT, FOIT y CLS y dar con el valor óptimo.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Introduce el nombre de la familia tipográfica y la URL (o ruta) del archivo de fuente.
- En las pestañas, elige el valor de font-display que quieras comparar: swap, block, fallback, optional o auto.
- Observa el periodo de bloqueo, el periodo de intercambio y la línea de tiempo de carga para entender cómo se comporta ese valor.
- Copia con el botón el código @font-face generado abajo y pégalo en el CSS de tu proyecto.
Preguntas frecuentes
- ¿Qué valor de font-display me conviene?
- Si priorizas que el texto se lea cuanto antes, lo habitual es swap; si lo que quieres es minimizar los saltos de maquetación (CLS), se suele recomendar optional. Compara la línea de tiempo y las explicaciones de la herramienta y elige según tu sitio.
- ¿Puedo usar el código generado tal cual?
- Se genera una regla @font-face básica con la font-family, la ruta del src y el valor de font-display. Si usas otros grosores o estilos, ajusta font-weight y font-style a las necesidades de tu proyecto.
- ¿Se envía a algún servidor la URL de la fuente que introduzco?
- No. Los datos solo se usan dentro del navegador para componer el código y no se envían a ninguna parte.