Convertir TTF a WOFF2
Alojar una fuente en su propio sitio empieza aquí: WOFF2 es el formato que todos los navegadores actuales descargan primero y el contenedor más liviano para los datos TrueType que ya tiene. Esta página también escribe la regla CSS que lo carga.
Convertidor de fuentes
o suelte aquí archivos TTF, OTF, WOFF … ·
Máx. 95 MB por archivo· Hasta 20 archivos· Se borran a los 30 minutos
Los archivos se procesan en nuestros servidores y se borran a los 30 minutos.
Quitar los alfabetos que no se usan puede reducir una fuente web de cientos de KB a menos de 30 KB. Conserve todos los caracteres en las fuentes que se instalan en una computadora.
Pegue el texto o los caracteres que la fuente debe cubrir, p. ej., la palabra de un logotipo o un titular. Todo lo demás se elimina.
El hinting mejora la nitidez del texto pequeño en pantallas de Windows. Quitarlo suele ahorrar un 10–30 % en fuentes web; el hinting automático lo agrega a fuentes que no lo tienen.
Déjelo vacío para conservar el original. Cambiar el nombre permite instalar la fuente convertida junto a la original sin conflictos.
P. ej., Regular, Bold, Italic. Déjelo vacío para conservar el nombre de estilo original.
Cómo usar esta herramienta
- 1
Suba los archivos TTF
Agregue todos los pesos y estilos que piensa usar, hasta 20 archivos de hasta 95 MB cada uno. Los TTF variables también funcionan y conservan sus ejes.
- 2
Mantenga el CSS y cree un subconjunto si puede
Incluir CSS @font-face ya está marcado. En Opciones avanzadas, ajuste Conservar caracteres a Latín básico o Latín + acentos si su sitio está en un idioma occidental, y considere poner Hinting en Quitar.
- 3
Convierta a WOFF2
Pulse Convertir a WOFF2 y descargue las fuentes junto con el archivo .css. Suba ambos a su sitio y enlace la hoja de estilos o pegue la regla en la suya.
¿Cómo convertir TTF a WOFF2 para un sitio web?
Suba el .ttf, deje marcado Incluir CSS @font-face y pulse Convertir a WOFF2. Obtendrá el archivo .woff2 y un archivo .css con una regla @font-face que apunta a él.
Por qué WOFF2 es el formato de fuente web que conviene publicar
Un TTF son datos de tablas sin comprimir: contornos, métricas, kerning y nombres. WOFF2, publicado como Recomendación del W3C en 2018, conserva exactamente esas tablas pero las pasa por Brotli, el algoritmo de compresión que Google lanzó en 2015, después de reorganizar los contornos de los glifos para que se compriman mejor. Las pruebas de Google encontraron que WOFF2 pesa en promedio un 30 % menos que el formato WOFF anterior, y el navegador restaura los datos originales de la fuente tras la descarga, así que la forma de las letras no cambia.
Las fuentes bloquean el renderizado, por lo que su peso importa más de lo que sugieren los kilobytes. Hasta que llega una fuente web, el navegador oculta el texto o muestra una fuente de respaldo, y un cambio tardío puede mover el diseño. Los archivos más livianos acortan ese intervalo, y dos opciones de esta página lo acortan aún más: Conservar caracteres elimina los glifos que sus páginas nunca muestran, y Hinting en Quitar descarta instrucciones que los teléfonos y las pantallas de alta densidad ignoran de todos modos. Guarde los TTF originales para uso en escritorio; convertir WOFF2 a TTF puede desempaquetar una fuente web más adelante, pero no puede recuperar glifos que eliminó un subconjunto.
Peso de archivo: TTF frente a WOFF2
TTF, juego de caracteres completo
100 %
Tablas de fuente sin comprimir, tal como se instalan en un escritorio
WOFF2, subconjunto Latín básico
a menudo 10–25 %
Compresión Brotli y menos glifos; varía según la fuente
La regla @font-face para una fuente WOFF2
@font-face {
font-family: "Marca Sans";
src: url("/fonts/marca-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Compatibilidad de WOFF2 en navegadores, versión por versión
2014
Chrome 36
El navegador de Google es el primero en decodificar WOFF2 por defecto.
2015
Firefox 39
Mozilla activa la decodificación de WOFF2 por defecto.
2016
Edge 14
El Edge original de Microsoft incorpora WOFF2 con la Actualización de aniversario de Windows 10.
2018
Recomendación del W3C
La especificación queda cerrada; para entonces Safari en macOS e iOS también decodifica WOFF2.
TTF
Fuente TrueType
TTF es el formato de fuentes TrueType, desarrollado por Apple a finales de los años ochenta, publicado en 1991 y luego licenciado a Microsoft. Define los contornos de los glifos con curvas cuadráticas e incluye instrucciones de hinting que hacen que el texto se vea nítido en pantalla. TrueType es compatible con todos los sistemas operativos de escritorio, procesadores de texto y aplicaciones de diseño. Carece de algunas funciones tipográficas avanzadas de OpenType y ocupa más que los formatos de fuentes web.
- Compresión
- Sin pérdida
- Transparencia
- –
- Animación
- –
- Presentado en
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 es la segunda versión de Web Open Font Format, basada en la compresión Brotli de Google y publicada como Recomendación del W3C en 2018. Los archivos son alrededor de un 30% más pequeños que los WOFF, lo que ayuda a que las páginas carguen más rápido. Todos los navegadores modernos admiten WOFF2, y es el formato recomendado para fuentes web. Los sistemas operativos de escritorio y las aplicaciones de diseño no pueden instalarlo directamente.
- Compresión
- Sin pérdida
- Transparencia
- –
- Animación
- –
- Presentado en
- 2018 · W3C (Google)
Pasar de TTF a WOFF2 empaqueta una fuente de escritorio en el contenedor comprimido con Brotli que prefieren los navegadores, para que los mismos glifos lleguen a los visitantes con menos bytes; la página inversa existe para quien necesita instalar una fuente que encontró en la web.
Preguntas frecuentes sobre TTF a WOFF2
¿Sigo necesitando un TTF o WOFF de respaldo junto al WOFF2?
Para sitios web públicos, hoy normalmente no. Chrome, Edge, Firefox y Safari leen WOFF2 desde hace años, y los pocos navegadores que no lo hacen, como Internet Explorer 11, rara vez justifican un archivo más. Añada la salida de TTF a WOFF como segunda entrada src solo si sus estadísticas muestran esas visitas.
¿Por qué mi fuente WOFF2 sigue pesando más de 100 KB?
La compresión solo reduce cómo se guardan los glifos, no cuántos hay. Una fuente que cubre latín, cirílico, griego y vietnamita los incluye todos. Lo que deja una fuente de texto en unas decenas de kilobytes es crear un subconjunto con los alfabetos que realmente muestra.
¿Qué hace font-display: swap en una fuente WOFF2?
Le indica al navegador que muestre el texto de inmediato con una fuente de respaldo y que la sustituya por su fuente web cuando llegue, en lugar de ocultar el texto mientras se descarga. Agréguelo a su regla @font-face como en el ejemplo de arriba, o use optional si prefiere evitar un cambio tardío en conexiones lentas.
¿Puedo convertir un TTF de Google Fonts a WOFF2 y alojarlo yo mismo?
Sí. Las familias de Google Fonts se publican bajo la SIL Open Font License o la Apache License, y ambas permiten convertirlas y alojarlas por cuenta propia. Alojar el archivo usted mismo evita además una solicitud a un servidor de terceros.
¿WOFF2 funciona en boletines por correo electrónico?
Solo en algunos clientes. Apple Mail y Mail de iOS cargan fuentes web mediante @font-face, mientras que Gmail y la mayoría de las versiones de Outlook las ignoran y muestran la fuente de respaldo. Incluya siempre una fuente segura del sistema en la pila de fuentes de un correo.