Generador de CSS @font-face
Genera al momento el código @font-face para WOFF2, WOFF y TTF indicando familia, grosor y rutas
En lugar de escribir a mano la regla @font-face cada vez que añades una fuente web, rellena el formulario y listo. Indica el nombre de la familia, el grosor, el estilo y las rutas de los archivos WOFF2, WOFF y TTF, y obtendrás en tiempo real el CSS estándar con la compatibilidad entre navegadores ya resuelta. Todo se procesa en tu navegador y nada se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige el nombre de la familia tipográfica, el grosor (weight) y el estilo (normal o cursiva).
- Introduce la ruta (URL) de cada archivo: WOFF2, WOFF y TTF.
- Revisa abajo el código CSS @font-face que se genera en tiempo real.
- Pulsa el botón de copiar y pega el código tal cual en tu hoja de estilos.
Preguntas frecuentes
- ¿La herramienta convierte de verdad un TTF a WOFF?
- No, no convierte formatos de archivo. Parte de que ya tienes los archivos WOFF2, WOFF y TTF: tú indicas sus rutas y ella genera el CSS @font-face estándar que los enlaza.
- ¿Por qué hay que incluir WOFF2, WOFF y TTF?
- Porque cada navegador admite formatos distintos y montar una cadena de fallback es la práctica habitual en la web. Los navegadores modernos usarán WOFF2, el más ligero, y los entornos antiguos irán recurriendo por orden a WOFF y TTF.
- ¿Puedo usar el código generado tal cual?
- Sí. Sigue el formato estándar e incluye font-display: swap, así que puedes pegarlo en tu archivo CSS y funcionará sin retoques.