Generador de código font-display
Compara valores de font-display y genera código @font-face
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite comparar visualmente cómo se comportan los valores de font-display en CSS (auto, block, swap, fallback, optional) durante la carga de una fuente, mediante una línea de tiempo interactiva. Basta con introducir el nombre de la familia tipográfica y la URL de la fuente para generar al instante el código @font-face correspondiente. Todo el proceso ocurre en el navegador sin enviar nada a un servidor, lo que resulta útil para desarrolladores frontend que quieren evitar problemas de FOUT, FOIT o desplazamiento de diseño (CLS).
Cómo usar
- Introduce el nombre de la familia tipográfica y la URL o ruta del archivo de fuente.
- Elige el valor de font-display a inspeccionar en las pestañas: swap, block, fallback, optional o auto.
- Revisa los periodos de bloqueo y cambio, y la línea de tiempo visual para entender el comportamiento.
- Copia el fragmento @font-face generado automáticamente con el botón de copiar y pégalo en tu CSS.
Preguntas frecuentes
- ¿Qué valor de font-display debería usar?
- swap es habitual cuando la legibilidad es prioritaria, mientras que optional suele recomendarse para minimizar el desplazamiento de diseño (CLS). Compara las líneas de tiempo y descripciones de la herramienta para elegir el que mejor se adapte a tu sitio.
- ¿Puedo usar el código generado tal cual?
- Se genera una regla @font-face básica con tu familia tipográfica, la ruta src y el valor de font-display elegido. Ajusta font-weight o font-style si necesitas otras variantes.
- ¿La URL de fuente que introduzco se envía a algún sitio?
- No. Tu entrada solo se usa localmente para generar el código y nunca se transmite.