Paso a paso: Convertir fuentes a WOFF2
- Añade tus fuentesArrastra uno o varios archivos .ttf u .otf, o haz clic para elegirlos. Verás una muestra de cada fuente.
- Espera la conversiónCada fuente se comprime con la librería woff2 de Google. Verás el tamaño antes y después y el ahorro.
- Ajusta el CSSIndica la carpeta donde subirás las fuentes y el font-display. El @font-face se genera con la familia, el peso y el estilo de cada archivo.
- DescargaDescarga cada WOFF2 por separado o todo en un ZIP que incluye el archivo fuentes.css.
¿Por qué usar WOFF2 en tu web?
WOFF2 es el formato de fuentes pensado para la web. Comprime con Brotli y con transformaciones específicas para fuentes, y suele pesar alrededor de un 30 % menos que WOFF y bastante menos que el TTF u OTF original. Menos peso significa que el texto aparece antes con tu tipografía.
Todos los navegadores actuales lo admiten (Chrome, Edge, Firefox, Safari y sus versiones móviles), así que hoy basta con servir WOFF2: ya no hacen falta EOT, SVG ni TTF de respaldo.
Una conversión real, no un cambio de extensión
Algunos conversores solo cambian el nombre del archivo. Aquí se usa la librería woff2 de Google, compilada a WebAssembly para funcionar dentro de tu navegador. La compresión es sin pérdida: la fuente conserva todos sus glifos, el kerning y las características OpenType.
Además, leemos los metadatos de cada fuente (nombre de familia, peso, cursiva y rangos de las fuentes variables) para escribir el @font-face correcto sin que tengas que adivinarlo.
Cómo usar las fuentes en tu web
- Sube los archivos
.woff2a una carpeta de tu web, por ejemplo/fonts/. - Pega el CSS generado en tu hoja de estilos y usa la familia con
font-family. - Precarga solo la fuente principal del texto visible al abrir la página.
- Si necesitas aún menos peso, puedes eliminar los caracteres que no uses (subsetting) con herramientas como
pyftsubset. - Comprueba siempre que la licencia de la fuente permite usarla en la web.
Características
Compresión WOFF2 de verdad
El codificador oficial de Google en WebAssembly, el mismo formato que sirve Google Fonts.
Por lotes y en ZIP
Convierte toda una familia de una vez y descárgala junto con su archivo CSS.
CSS automático
Familia, peso, cursiva y rangos de fuentes variables leídos de cada archivo.
Tus fuentes no se suben
Las fuentes con licencia comercial se quedan en tu equipo: todo ocurre en tu navegador.
Preguntas frecuentes
¿La fuente pierde calidad al pasar a WOFF2?
No. WOFF2 es un formato comprimido sin pérdida: el texto se ve exactamente igual. Solo cambia el tamaño del archivo.
¿Qué navegadores admiten WOFF2?
Todos los navegadores modernos: Chrome, Edge, Firefox, Safari, Opera y sus versiones para móvil. Solo navegadores muy antiguos, como Internet Explorer, no lo admiten.
¿Puedo convertir WOFF a WOFF2?
Esta herramienta necesita el archivo original TTF u OTF. Si solo tienes WOFF, busca el original en la web del autor; si subes un WOFF o un WOFF2 te avisaremos en lugar de generar un archivo inválido.
¿Funciona con fuentes variables?
Sí. Se conservan los ejes de variación y el CSS indica el rango de pesos disponible, por ejemplo font-weight: 100 900.
¿Puedo convertir cualquier fuente?
Técnicamente sí, pero legalmente depende de su licencia. Muchas fuentes comerciales necesitan una licencia web específica. Las de Google Fonts, por ejemplo, usan licencias libres que lo permiten.
¿Necesito también TTF o WOFF como respaldo?
Hoy no. Basta con WOFF2 y una fuente del sistema como alternativa en font-family, por ejemplo font-family: "Mi Fuente", sans-serif;.
Actualizado: · Equipo de INNOZONA