Español ▾
Free, Fast & Secure Online Tools
WOFF significa Web Open Font Format, y lo primero que hay que entender es que no es un tipo nuevo de fuente. Es una envoltura: una fuente TrueType u OpenType existente, comprimida, con algunos metadatos, empaquetada para que un navegador la descargue rápido.
Las letras de dentro no cambian. Lo que cambia es la eficiencia con que viajan.
El consejo práctico es inusualmente simple: sirve solo WOFF2. Las alternativas que las guías recomendaban — WOFF, TTF, EOT, fuentes SVG — son hoy peso muerto que el navegador de cada visitante ignora.
TTF y OTF funcionan en navegadores, pero cargan equipaje de escritorio que la web no necesita y son bastante mayores. Pertenecen a tu ordenador, no a una página.
Aquí las fuentes web dejan de ser un problema resuelto, y conviene decirlo en números.
Una fuente latina cubre quizá 200 a 400 caracteres. Como WOFF2 eso suele ser 20 a 50 KB. Trivial.
Una fuente china debe cubrir miles de caracteres. Una que soporte chino tradicional o simplificado común tiene de 6.000 a 20.000 glifos, y como WOFF2 eso suele ser 3 a 15 MB, para un solo peso. Japonés y coreano son comparables.
Es cien veces el tamaño, y no es un problema de compresión que nadie pueda arreglar: la fuente realmente contiene esos dibujos distintos. Servirla como fuente web normal significa que el visitante descarga varios megas antes de que el texto se vea bien, lo cual es inaceptable en una conexión móvil.
Existen tres enfoques reales:
Subconjuntos. Construir una fuente que contenga solo los caracteres que la página usa. Para una página fija — una landing, una portada, un juego de títulos — funciona de maravilla y puede bajar 10 MB a 30 KB. Falla con contenido cambiante, porque un carácter ausente del subconjunto cae en otra fuente y se nota.
División por unicode-range. La fuente se corta en muchos archivos pequeños por rango de caracteres, y el navegador descarga solo las piezas con caracteres presentes en la página. Así funcionan los grandes servicios de fuentes CJK, y es el único enfoque que admite contenido arbitrario. Aun así son decenas de peticiones y unos cientos de kilobytes.
Fuentes del sistema. Usar las que ya tiene el dispositivo. No se descarga nada, el texto aparece al instante y la tipografía es la que ese aparato tenga. Para texto corrido en chino suele ser la opción honesta: el coste de rendimiento de una fuente CJK propia es real y la ganancia visual en un móvil es pequeña.
Un término medio habitual: fuente propia en subconjunto para los títulos, donde el repertorio es pequeño y conocido, y fuentes del sistema para el cuerpo.
Eliges con font-display en la hoja de estilos. swap te da FOUT y es el valor correcto para el cuerpo: legible ya vence a bonito al final. optional va más allá: el navegador usa la fuente propia solo si llega casi al instante, y si no mantiene la alternativa durante esa visita, eliminando el salto.
El salto se reduce eligiendo una alternativa de proporciones parecidas, para que menos texto se recomponga al cambiar.
Una familia tradicional entrega un archivo por peso y estilo. Seis archivos, seis descargas.
Una fuente variable pone todo el rango en un archivo, con el peso como eje continuo. Es mayor que un peso suelto pero mucho menor que todos juntos, así que en cuanto necesitas tres o más pesos gana. Algunas exponen además anchura, inclinación o tamaño óptico.
Una licencia de fuente para escritorio normalmente no permite incrustarla en la web. La fuente que compraste, o que venía con tu software de diseño, está licenciada para crear documentos en tu máquina, no para servirse a cada visitante de un sitio. El uso web es otra licencia, a menudo tarifada por páginas vistas.
Convertir un TTF de escritorio a WOFF2 y subirlo es técnicamente trivial y, en la mayoría de los casos, una infracción de licencia. Existen muchísimas familias de código abierto que cubren casi cualquier necesidad, incluidas varias buenas familias CJK; esa es la respuesta directa.
La misma distinción vale para incrustar fuentes en un EPUB publicado, que también es distribución y no uso personal.
Los problemas de fuentes en un PDF se parecen pero tienen otra causa. Un PDF incrusta sus fuentes dentro del documento, así que es autónomo; cuando cambian las fuentes de un PDF es porque no se incrustaron y el lector sustituyó algo.
Una fuente web nunca está incrustada en la página: es un archivo aparte que se trae por la red y puede no llegar por motivos que un PDF nunca afronta — una petición bloqueada, una conexión lenta, una hoja de estilos que nombra un archivo inexistente.
font-display: swap muestra texto legible ya en vez de espacio en blanco