¿Por qué CSS necesita tantos formatos de fuente?

¿Por qué CSS necesita tantos formatos?

¿Alguna vez te has preguntado por qué un archivo CSS necesita una lista interminable de formatos para cargar una simple fuente? Mira este bloque de código:

@font-face {
  font-family: "gobCL";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/gobcl_light.eot?") format("eot"),
       url("fonts/gobcl_light.woff") format("woff");
}

Al principio, puede parecer redundante. ¿Por qué especificar el peso y la cursiva si luego le das una lista de archivos? La respuesta tiene más que ver con la historia del desarrollo web que con la técnica pura.

El problema de los navegadores

Los navegadores no siempre hablaron el mismo idioma. Durante años, diferentes versiones de Internet Explorer y otros motores requerían formatos distintos para renderizar texto correctamente:

• EOT (Embedded OpenType): Este formato es un fósil digital. Era esencial únicamente para las versiones antiguas de Internet Explorer.
• TTF (TrueType): El formato clásico que todos conocemos, pero que no siempre fue eficiente ni compatible con todas las plataformas modernas.
• WOFF: Diseñado específicamente para la web. Es más pequeño y carga mucho más rápido gracias a su compresión avanzada.

Cómo funciona el sistema de fallback

La clave está en cómo el navegador procesa esa lista de src. En lugar de elegir solo uno, CSS utiliza un sistema de respaldo inteligente. El navegador intenta cargar el primer formato disponible (el .eot). Si ese archivo no existe o si el navegador no lo soporta, automáticamente pasa al siguiente en la lista.

Esto garantiza que tu texto se vea bien sin importar qué dispositivo esté usando el usuario: los navegadores antiguos cargan su versión específica de EOT, mientras que los sistemas modernos saltarán directamente a WOFF para obtener la mejor velocidad y calidad.

Optimizando para hoy

Hoy en día, la realidad es que ya no necesitas ese montón de archivos antiguos. Si estás trabajando en un proyecto moderno, puedes simplificar tu CSS y dejar solo:

src: url("gobcl_light.woff2") format("woff2"),
     url("gobcl_light.woff") format("woff");

Al eliminar los formatos obsoletos, no solo limpias tu código, sino que optimizas la carga de tus recursos. Es una lección clave: el CSS moderno te permite ser flexible con el pasado para mantenerte ligero en el presente.