Conversor de formatos de fuente
Font Converter
Convierte TTF y OTF a WOFF y a la inversa dentro del navegador y emite la regla @font-face correspondiente; WOFF2 necesita Brotli y se rechaza indicando qué herramienta de escritorio usar.
Convierte entre los formatos sfnt y WOFF 1.0 en las dos direcciones, deduciendo hacia dónde ir a partir del archivo que sueltes. Las dos direcciones son sin pérdida: WOFF es un contenedor, así que empaquetar y desempaquetar devuelve las mismas tablas, con `head.checkSumAdjustment` recalculado para que el resultado valide. WOFF2 se rechaza, y la página explica por qué en lugar de fallar en silencio.
TTF · OTF → WOFF, o WOFF → TTF · OTF
Suelta un archivo y la dirección se deduce sola. Todo ocurre en esta pestaña.
Qué funciona y qué no
- · TTF y OTF ⇄ WOFF 1.0: zlib por tabla, con una cabecera y un directorio de 44 bytes, como dice la especificación WOFF (W3C, 2012). La compresión es el
CompressionStream('deflate')del propio navegador, y al desempaquetar se rearma el sfnt con las sumas de comprobación originales para quehead.checkSumAdjustmentsalga bien. Las dos direcciones son sin pérdida. - · WOFF2 no se puede ni construir ni desempaquetar. Necesita Brotli, y la plataforma web no expone Brotli a una página. Si te hace falta WOFF2, usa una herramienta de escritorio: suele quedar otro 20–30 % más pequeño que WOFF.
- · TTF ⇄ OTF (CFF), cambiar el formato de los contornos, es un redibujo y no una conversión, así que no se ofrece. Un .otf que por dentro es TrueType y solo engaña en la extensión se trata con normalidad.
- · La licencia de una fuente (OS/2 fsType) no cambia al convertirla. Revisa las condiciones de distribución antes de subirla a un servidor.
Para el tamaño, recortar una fuente a los glifos usados gana por mucho a convertir de formato: baja una fuente de hangul más de un 90 % cuando se la reduce al juego de 2350 sílabas.
Cómo se usa
Suelta un archivo
Un TTF u OTF se empaqueta en WOFF; un WOFF se desempaqueta de vuelta a TTF u OTF según los contornos que contenga. No hay ningún conmutador de dirección porque la firma de los primeros cuatro bytes ya dice hacia dónde ir.
Comprueba los tamaños antes y después
Pasar a WOFF normalmente quita un 40–50 %, que es zlib por tabla y nada ingenioso. Si apenas se mueve, la fuente probablemente ya es datos comprimidos: una fuente CFF con muchos charstrings empaquetados, por ejemplo.
Toma el archivo y el @font-face
La declaración asume que el archivo está junto a la hoja de estilos, y los valores de peso y cursiva se leen de las tablas OS/2 y post de la fuente en lugar de adivinarse por el nombre del archivo.
Preguntas frecuentes
¿Por qué no hace WOFF2?
WOFF2 está comprimido con Brotli y además reordena y transforma las tablas de glifos. La plataforma web le da a una página `CompressionStream` solo con deflate y gzip: no hay Brotli, así que ninguna de las dos direcciones es posible en un navegador. En un equipo de escritorio, fonttools (`pyftsubset --flavor=woff2`) o `woff2_compress` lo hacen, por aproximadamente otro 20–30 % sobre WOFF.
¿Puede convertir un TTF en un OTF de verdad?
No, y nada honesto puede. TrueType usa curvas cuadráticas y CFF usa cúbicas; pasar entre ellas es un reajuste de curvas con una tolerancia, que cambia los contornos: eso es redibujar la fuente, no convertirla. Lo que esto sí maneja es el caso común de un `.otf` que tiene contornos TrueType dentro, donde solo la extensión engaña.
¿Sigo necesitando WOFF, o basta con TTF?
Un TTF servido con gzip o brotli por el servidor acaba cerca de WOFF, así que el formato importa menos que antes. WOFF sigue mereciendo la pena: comprime incluso cuando el servidor no lo hace, y todos los navegadores que importan lo admiten desde hace una década. La ganancia mucho mayor es el recorte, no el contenedor.
¿Convertir cambia lo que permite la licencia?
No. El fsType de OS/2 y todos los registros de nombre pasan sin cambios, lo que significa que una fuente que no puedes incrustar sigue siendo una fuente que no puedes incrustar después de convertirse en WOFF. Comprueba los términos de distribución antes de ponerla en un servidor; el inspector muestra esos registros.
Puede recibir de
Inspector de fuentes
Font Inspector
Abre un archivo de fuente y muestra su cobertura de glifos por bloque, pesos, ejes variables, permiso de incrustación y los registros de nombre de la licencia.
Recortar una fuente a los glifos usados
Font Subsetter
Reduce una fuente TrueType a los glifos que tu texto usa de verdad y puede envolver el resultado como WOFF, que es la diferencia entre una fuente web de megabytes y una de kilobytes.
Editor y explicador de SVG
SVG Editor and Explainer
Edita un SVG junto a su render en vivo y explica el archivo: viewBox y escalado, transformaciones, cada comando de trazado, el color heredado, los bytes desperdiciados y qué se rompe dentro de un <img>, de un data URI o en línea.
Maquetas de dispositivo
Device Mockup
Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Inspector de fuentes
Font Inspector
Abre un archivo de fuente y muestra su cobertura de glifos por bloque, pesos, ejes variables, permiso de incrustación y los registros de nombre de la licencia.
Recortar una fuente a los glifos usados
Font Subsetter
Reduce una fuente TrueType a los glifos que tu texto usa de verdad y puede envolver el resultado como WOFF, que es la diferencia entre una fuente web de megabytes y una de kilobytes.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.