Morph Blog
Fuentes

TTF a WOFF2, en detalle.

¿Por qué WOFF2 es un 30% más pequeño, cómo mejora los Core Web Vitals y cómo convertir sin violar los términos de licencia de fuentes — hecho en tu navegador, en segundos.

DE MORPH3 MIN LECTURAACTUALIZADO ABRIL 2026

Si estás sirviendo fuentes TTF en tu sitio web, estás enviando aproximadamente un 30% más de datos de lo necesario. WOFF2 entrega la misma tipografía en un archivo significativamente más pequeño, y cada navegador moderno lo soporta. Aquí está cómo convertirlo — y por qué importa para el rendimiento de tu sitio.

¿Por qué WOFF2?

WOFF2 (Web Open Font Format 2.0) usa compresión Brotli para reducir los archivos de fuentes aproximadamente un 30% en comparación con TTF, sin pérdida de calidad. Los glifos de fuente, las indicaciones, el espaciado y todas las características tipográficas se preservan idénticamente. Cuando un navegador carga un archivo WOFF2, lo descomprime a los mismos datos que el TTF original.

El impacto en el rendimiento es real. Las fuentes son recursos que bloquean la representación — el navegador no pintará el texto hasta que las fuentes terminen de cargarse. Un TTF de 120KB que se convierte en un WOFF2 de 84KB significa que el texto aparece más rápido, especialmente en conexiones móviles. Los indicadores de Google Core Web Vitals miden directamente esto: las fuentes más pequeñas mejoran el Largest Contentful Paint (LCP) y reducen el Cumulative Layout Shift (CLS) causado por intercambios de fuentes.

La compatibilidad con navegadores es universal. Chrome, Firefox, Safari y Edge admiten WOFF2. Los únicos navegadores que no lo hacen son Internet Explorer y navegadores Android muy antiguos — ambos con menos del 1% del tráfico global.

Cómo convertir

Paso 1 Abre morph.cool/ttftowoff2 en tu navegador.
Paso 2 Suelta tu archivo de fuente .ttf en la página.
Paso 3 Morph comprime el archivo usando wawoff2 (una versión de WebAssembly del codificador WOFF2 de Google con compresión Brotli).
Paso 4 Tu archivo .woff2 se descarga automáticamente. Agrégalo a tu proyecto y actualiza tu regla CSS @font-face.

Uso de WOFF2 en CSS

Una vez que tengas tu archivo WOFF2, haz referencia a él en tu hoja de estilo. Lista WOFF2 primero con una alternativa TTF para máxima compatibilidad:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
     url('/fonts/myfont.ttf') format('truetype');
  font-display: swap;
}

La directiva font-display: swap indica al navegador que muestre el texto de respaldo inmediatamente y sustituya la fuente personalizada una vez cargada, eliminando el texto invisible durante la carga de fuentes.

Cumplimiento de licencias de fuentes

Muchas licencias comerciales de fuentes incluyen cláusulas que restringen la subida de archivos de fuentes a servicios web de terceros. Esto crea un problema: necesitas convertir a WOFF2 para rendimiento, pero la mayoría de las herramientas de conversión requieren subir la fuente a un servidor.

Morph convierte fuentes completamente en tu navegador usando WebAssembly. El archivo de fuente nunca sale de tu dispositivo — se procesa localmente y se guarda directamente en tu carpeta de descargas. Sin subida significa que no hay distribución a una tercera parte.

Por supuesto, siempre revisa los términos específicos de tu licencia de fuente. Pero la naturaleza exclusivamente local de la conversión de Morph elimina la preocupación de cumplimiento más común.

Otras conversiones de fuentes

Morph también admite OTF a WOFF2, WOFF a WOFF2, TTF a OTF y cualquier otra combinación de TTF, OTF, WOFF y WOFF2. ¿Necesitas fuentes gratuitas para empezar? Explora más de 1,500 fuentes gratuitas en la biblioteca de fuentes de Morph.

Convertir TTF a WOFF2 — Gratis