Generador de Webfonts @font-face
Fuentes variables, WOFF2 y CSS en un clic
Arrastra tus archivos TTF, OTF, WOFF o WOFF2 — incluidas fuentes variables —, elige tus opciones y descarga un paquete listo para alojar con WOFF2, WOFF, una hoja de estilos completa stylesheet.css y una página de demostración.
Arrastra fuentes aquí o haz clic para examinar
TTF, OTF, WOFF, WOFF2 y fuentes variables — se permiten varios archivos
Fuentes seleccionadas
Opciones de conversión
Es el nombre que usarás en tu CSS, por ejemplo font-family: 'MiNombre';. Déjalo vacío para conservar el nombre de familia original de cada archivo.
Controla cómo se muestra el texto mientras se carga la webfont.
Ruta usada dentro de url(...) en la hoja de estilos generada.
Consejo: pulsa Ctrl+Enter para generar.
Tu paquete de webfont está listo
El ZIP contiene: fuentes convertidas, stylesheet.css y una demo.html en vivo.
100 % en el cliente
La conversión se ejecuta íntegramente en tu navegador con WebAssembly. Tus fuentes nunca se suben.
Fuentes variables y todos los formatos
Entrada en TTF, OTF, WOFF y WOFF2 — salida en WOFF2 optimizado, con soporte completo de ejes de fuentes variables (wght, wdth, slnt, ital).
Salida lista para producción
Incluye un stylesheet.css con el font-display correcto, local() opcional y una demo.html para que puedas integrar el paquete en tu proyecto al instante.
¿Qué es un generador de webfonts?
Un generador de webfonts convierte archivos de fuentes de escritorio o descargados (TTF, OTF, WOFF, WOFF2 — incluidas las modernas fuentes variables) a los formatos que los navegadores pueden cargar por la web — principalmente WOFF2 hoy en día, con WOFF como respaldo heredado — y produce las declaraciones CSS @font-face correspondientes para que puedas autoalojar la tipografía de tu sitio web.
¿Por qué autoalojar las fuentes?
El autoalojamiento te da control total sobre rendimiento, privacidad y fiabilidad. No hay petición a terceros como Google Fonts (útil para el RGPD), no hay búsqueda DNS extra, puedes hacer preload del archivo y decides exactamente qué pesos, estilos y ejes se distribuyen con tu sitio.
Cómo funciona la conversión
WOFF2 envuelve los contornos TTF/OTF en un contenedor comprimido con Brotli diseñado específicamente para la web — normalmente un 30 % más pequeño que WOFF y más de un 50 % más pequeño que el TTF original. WOFF es un envoltorio más antiguo comprimido con zlib, que se mantiene como respaldo para navegadores muy antiguos. Nuestro generador ejecuta el codificador y descodificador WOFF2 oficial de Google compilado a WebAssembly, así que la conversión ocurre localmente dentro de tu navegador. Suelta un WOFF2 descargado de Google Fonts y lo decodificamos de forma transparente a un contenedor sfnt antes de volver a codificarlo — nunca tienes que buscar el TTF original.
Qué obtienes en el paquete
- Fuentes en WOFF2 (y opcionalmente WOFF/TTF) por cada archivo subido — incluidas las fuentes variables que se mantienen como un único archivo pequeño.
- Una stylesheet.css completa con una regla @font-face por archivo, los format() correctos, rangos de font-weight, font-style, font-stretch, font-display y local() opcional.
- Una página demo.html para que puedas previsualizar cada peso, estilo y eje a varios tamaños antes de salir en producción.
- Incrustación opcional en Base64 para enviar la fuente en línea dentro de tu CSS para escenarios offline-first o de archivo único.
Privacidad y licencias
Los archivos nunca salen de tu dispositivo — todo se procesa en tu navegador. Asegúrate siempre de que la licencia de tu fuente permite la incrustación como webfont antes de publicarla en tu sitio web.