Generador de Código CSS @font-face
Cree directivas CSS @font-face válidas para sus tipografías locales con soporte de WOFF2 y TTF
Genera reglas CSS estructuradas para cargar archivos tipográficos locales en la web.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Ingrese el nombre de la familia tipográfica.
- Indique las rutas de los archivos (woff2, woff, ttf).
- Seleccione el grosor y estilo, y copie el código CSS generado.
Preguntas frecuentes
- ¿Qué hace font-display?
- Controla el comportamiento del texto mientras la fuente se carga. Se recomienda la opción 'swap'.
- ¿Cómo registro varios archivos de fuente con distinto grosor, como Regular y Bold, a la vez?
- La herramienta genera un bloque @font-face por vez, así que hay que generarlo una vez por cada grosor —cambiando la ruta del archivo y el valor de font-weight cada vez— y luego unir los bloques resultantes. Con el mismo nombre de font-family pero font-weight: 400 para Regular y 700 para Bold, el navegador elegirá automáticamente el archivo correcto según el grosor.
- ¿Cómo registro varios archivos de fuente con distinto grosor, como Regular y Bold, a la vez?
- La herramienta genera un bloque @font-face por vez, así que hay que generarlo una vez por cada grosor —cambiando la ruta del archivo y el valor de font-weight cada vez— y luego unir los bloques resultantes. Con el mismo nombre de font-family pero font-weight: 400 para Regular y 700 para Bold, el navegador elegirá automáticamente el archivo correcto según el grosor.