Convertidor de TTF a WOFF2

Convierte fuentes TrueType (.ttf) y OpenType (.otf) en fuentes web WOFF2 o WOFF compactas y obtén el CSS @font-face para usarlas. La conversión se hace por completo en tu navegador, así que tus archivos de fuentes nunca salen de tu dispositivo.

Última actualización: 31 de octubre de 2026

Cómo usar Convertidor de TTF a WOFF2

1. Suelta tus archivos .ttf u .otf en el recuadro o haz clic en él para elegirlos. La conversión empieza automáticamente.
2. Elige el formato de salida: WOFF2 para navegadores modernos, WOFF2 + WOFF para la máxima compatibilidad o solo WOFF.
3. Revisa el resultado: cada fuente muestra el nuevo tamaño, el porcentaje ahorrado y si el navegador la cargó.
4. Configura las opciones de CSS: la carpeta donde subirás las fuentes, font-display y la incrustación opcional en Base64.
5. Pulsa Descargar en cada archivo o Descargar todo (ZIP) y luego copia el CSS @font-face en tu hoja de estilos.

TTF vs. WOFF vs. WOFF2

El ahorro se calcula como (tamaño original − tamaño nuevo) ÷ tamaño original × 100. Ejemplo: un TTF de 741.9 KB que pasa a 330 KB como WOFF2 ahorra (741.9 − 330) ÷ 741.9 × 100 ≈ 55.5%.

Cómo se construye un archivo WOFF

El codificador integrado sigue la especificación WOFF 1.0 del W3C:

1. Un encabezado de 44 bytes que empieza con la firma wOFF, el tipo original (0x00010000 para TrueType u OTTO para CFF), la longitud total del archivo, el número de tablas y el tamaño que tendrá la fuente sin comprimir.
2. Un directorio de tablas con una entrada de 20 bytes por tabla, ordenadas por etiqueta: etiqueta, desplazamiento, longitud comprimida, longitud original y suma de comprobación de la tabla.
3. Los datos de las tablas, cada una comprimida con zlib cuando así ocupa menos (si no, se guarda tal cual), con relleno hasta un límite de 4 bytes.

Como cada tabla se conserva byte a byte, el navegador recrea exactamente la fuente original al descomprimir el archivo.

Cómo usar el CSS @font-face generado

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", system-ui, sans-serif; }

• Sube los archivos convertidos a la carpeta indicada en "Carpeta URL de las fuentes" (por ejemplo /fonts/).
• Añade una regla @font-face por cada peso y estilo, todas con el mismo nombre de font-family, para que font-weight: 700 elija el archivo Bold.
• font-display: swap muestra el texto alternativo de inmediato y lo cambia por la fuente web cuando llega, lo que evita el texto invisible.
• Precarga la fuente más importante con <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>.
• Sirve las fuentes desde el mismo dominio o envía un encabezado Access-Control-Allow-Origin; los navegadores bloquean las fuentes de otro origen sin CORS.

Preguntas frecuentes

Herramientas relacionadas

Ver todas las de Conversores de datos y formatos de archivo →