Generador de CSS @font-face
Genera al instante código @font-face WOFF2/WOFF/TTF con tus datos de fuente
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta escribe la regla @font-face por ti, en lugar de programarla a mano cada vez que añades una fuente web. Introduce el nombre de la familia tipográfica, el peso, el estilo y las rutas de tus archivos WOFF2, WOFF y TTF, y obtendrás al instante un fragmento CSS compatible con navegadores; todo el procesamiento ocurre localmente en tu navegador, sin enviar nada a un servidor.
Cómo usar
- Introduce el nombre de la familia tipográfica y elige peso y estilo (normal/cursiva).
- Completa las URL de los archivos WOFF2, WOFF y TTF.
- Revisa el código CSS @font-face generado en tiempo real debajo del formulario.
- Pulsa Copiar código y pégalo directamente en tu hoja de estilos.
Preguntas frecuentes
- ¿Esta herramienta convierte realmente archivos TTF a WOFF?
- No, no convierte los formatos de archivo. Solo toma las rutas de archivos de fuente que ya tienes y genera el CSS @font-face estándar que los enlaza.
- ¿Por qué debo indicar WOFF2, WOFF y TTF a la vez?
- Como cada navegador admite formatos distintos, usar una cadena de respaldo es la práctica web habitual. Los navegadores modernos cargan primero el WOFF2, más ligero, y recurren a WOFF o TTF en entornos antiguos.
- ¿Puedo usar el código generado tal cual?
- Sí, incluye font-display: swap y sigue el formato estándar, así que puedes pegarlo directamente en tu archivo CSS sin modificaciones.