T
fonts web-design performance typography svg ico file-extensions

Guía de Extensiones de Archivos Web y de Fuentes: WOFF2, TTF, OTF e ICO

¿Por qué hay tantos formatos de fuentes e iconos web? Conozca las diferencias entre .woff2, .woff, .ttf, .otf, .svg e .ico.

2026-04-11

Guía de extensiones de archivos web y fuentes: WOFF2, TTF, OTF e ICO

Al crear un sitio web o diseñar un producto digital, elegir el formato de archivo adecuado para la tipografía y los iconos es crucial tanto para la calidad visual como para la velocidad de carga. El uso de un formato de fuente obsoleto puede dar lugar a texto "invisible" mientras se carga la fuente, o ralentizar significativamente el rendimiento de su sitio.

Esta guía detalla las extensiones esenciales de fuentes y gráficos web que necesita conocer.

Tabla de referencia rápida: Formatos de fuentes y web

Extensión Nombre completo Compresión Uso principal
.woff2 Web Open Font Format 2.0 Muy alta Web moderna (Mejor rendimiento)
.woff Web Open Font Format 1.0 Alta Web (Soporte para navegadores antiguos)
.ttf TrueType Font Baja Escritorio Windows/macOS, Web básica
.otf OpenType Font Baja Diseño gráfico, tipografía avanzada
.svg Scalable Vector Graphics Variable Iconos web, logotipos, arte vectorial
.ico Icon Ninguna Favicons (Iconos de pestañas del navegador)

1. El estándar de la web moderna (.woff2)

WOFF2 es el estándar de oro para la tipografía web hoy en día. Utiliza un algoritmo de compresión avanzado (Brotli) para hacer que los archivos de fuentes sean hasta un 30% más pequeños que el WOFF original.

  • Ventajas: Tiempos de carga más rápidos, compatible con todos los navegadores modernos.
  • ¿Por qué usarlo? Si solo le interesan los navegadores modernos (Chrome, Firefox, Safari, Edge), .woff2 es el único formato que necesita incluir en su @font-face de CSS.

2. Soporte heredado (.woff)

El predecesor de WOFF2. Aunque todavía es ampliamente compatible, no es tan eficiente.

  • ¿Por qué usarlo? Úselo como alternativa si necesita dar soporte a navegadores un poco más antiguos que aún no entienden WOFF2.

3. Estándares de escritorio y diseño (.ttf, .otf)

Estos son los formatos que instala en su ordenador para usar en Word, Photoshop o Figma.

  • TTF (TrueType): Desarrollado por Apple y Microsoft en la década de 1980. Es el formato más común para uso general.
  • OTF (OpenType): Basado en TTF pero admite "funciones OpenType" avanzadas como ligaduras, versalitas y glifos alternativos. Los diseñadores prefieren OTF para trabajos impresos y digitales de alta gama.
  • Uso web: Aunque puede usarlos en la web, no están comprimidos y son pesados. Es mejor convertirlos primero a WOFF2.

4. Gráficos vectoriales escalables (.svg)

A diferencia de las fuentes, que son colecciones de caracteres, SVG es un formato de imagen vectorial.

  • Logotipos e iconos: Los SVG son perfectos para logotipos porque nunca se ven borrosos, sin importar cuánto se amplíen.
  • En CSS: Puede usar los SVG como imágenes de fondo o incluso como "fuentes SVG" (aunque esto último está casi obsoleto en favor de WOFF2).

5. El Favicon (.ico)

El formato .ico es un contenedor especializado que puede albergar múltiples versiones de un icono en diferentes tamaños (16x16, 32x32, 48x48) en un solo archivo.

  • Uso principal: El "favicon" que se ve en las pestañas del navegador.
  • Alternativa moderna: La mayoría de los navegadores modernos ahora admiten PNG o SVG para los favicons, pero .ico sigue siendo la opción de respaldo más compatible.

Buenas prácticas para la tipografía web

  1. Priorice WOFF2: Siempre enumere .woff2 primero en su CSS para asegurarse de que los navegadores modernos obtengan el archivo más pequeño.
  2. Subconjunto de fuentes: Muchos archivos de fuentes contienen caracteres de cientos de idiomas que no utiliza. "Subconjuntar" una fuente elimina los caracteres no utilizados, reduciendo aún más el tamaño del archivo.
  3. Use font-display: swap: Esto garantiza que el texto sea visible usando una fuente del sistema de inmediato, cambiando a la fuente personalizada una vez que haya terminado de cargarse.

Preguntas frecuentes (FAQ)

P: ¿Puedo convertir .ttf a .woff2 en línea?

R: ¡Sí! Hay muchas herramientas gratuitas que tomarán sus archivos de escritorio .ttf u .otf y los comprimirán en archivos .woff2 listos para la web.

P: ¿Admite WOFF2 todas las funciones de OTF?

R: Sí. WOFF2 es esencialmente un archivo OTF o TTF envuelto en una capa de compresión muy eficiente. Conserva todas las características tipográficas (como las ligaduras) del archivo original.

P: ¿Debería usar SVG para los iconos de mi sitio web?

R: Por lo general, sí. Los SVG son nítidos, admiten transparencia y se pueden estilizar con CSS. Para conjuntos de iconos complejos, algunos desarrolladores prefieren las "fuentes de iconos" (usando un archivo .woff2), pero el SVG en línea se considera la mejor práctica moderna.

Herramientas relacionadas en Tool3M

Volver al blog