Optimización de proyectos legacy que aún usan icon fonts: cómo reducir drásticamente el peso de TTF, WOFF y WOFF2 con icon-font-reducer

Durante años, los icon fonts fueron el estándar para representar iconografía en aplicaciones web. Librerías como FontAwesome, Material Design Icons, Bootstrap Icons o Remix Icons dominaron el ecosistema, ofreciendo miles de glifos empaquetados en archivos TTF, WOFF y WOFF2. Sin embargo, en muchos proyectos legacy estos archivos siguen presentes, y con ellos un problema silencioso pero significativo: cargar cientos o miles de iconos que nunca se usan.

En un mundo donde la optimización de rendimiento es clave para mejorar métricas como LCP, TTFB y Core Web Vitals, mantener icon fonts completos puede representar un lastre innecesario. Por suerte, hoy existen herramientas que permiten modernizar estos proyectos sin reescribir su sistema de iconos. Una de ellas es icon-font-reducer, y otra (más automatizada aún) es su plugin para Vite: vite-plugin-icon-font-reducer.

---

Por qué los icon fonts siguen existiendo en proyectos legacy

Aunque los SVG sprites y los iconos basados en componentes son el estándar moderno, muchos sistemas antiguos siguen dependiendo de icon fonts por razones como:

• Integración histórica con frameworks populares.
• Compatibilidad con navegadores antiguos.
• Plantillas extensas donde cambiar el sistema de iconos sería costoso.
• Uso de CMS o entornos donde los iconos están dispersos en múltiples archivos.

El resultado: proyectos que cargan fuentes de 100 KB, 200 KB o incluso más, aunque solo utilicen una docena de iconos.

---

El problema del peso excesivo en TTF/WOFF/WOFF2

Un archivo de iconos típico incluye todos los glifos disponibles, independientemente de cuántos se usen realmente. Por ejemplo:

• Material Design Icons: más de 6.000 iconos.
• Bootstrap Icons: más de 1.000 iconos.
• FontAwesome Free: cientos de iconos en múltiples estilos.

Esto significa que un proyecto que usa solo 20 iconos podría estar cargando más de 95% de contenido innecesario.

Ese exceso afecta:

• Tiempo de carga inicial.
• Transferencia de datos en dispositivos móviles.
• Métricas de rendimiento.
• Experiencia del usuario.

---

Subsetting: la solución moderna para proyectos legacy

El subsetting consiste en recortar una fuente para dejar únicamente los glifos realmente utilizados. En icon fonts, esto significa:

• Detectar las clases de iconos presentes en el proyecto.
• Generar una nueva fuente con solo esos iconos.
• Reemplazar la fuente original por la versión reducida.

Los beneficios son inmediatos:

• Reducciones del 80–95% del peso.
• Menos solicitudes de red.
• Mejor caché.
• Sin cambiar la forma en que el proyecto usa los iconos.

---

Icon Font Reducer: la herramienta ideal para este trabajo

icon-font-reducer es una herramienta diseñada específicamente para este problema. Analiza el código del proyecto, detecta las clases de iconos utilizadas y genera nuevas fuentes optimizadas.

Entre sus capacidades:

• Escaneo de HTML, CSS, JS y plantillas.
• Detección de clases mediante expresiones regulares.
• Generación de fuentes subset en TTF, WOFF y WOFF2.
• Compatibilidad con múltiples librerías: Material Design Icons, Bootstrap Icons, Remix Icons, CoreUI, FontAwesome Free, LineAwesome, Lineicons, Lucide Static, entre otras.

En pruebas reales, la reducción fue impresionante:

• WOFF: 176 KB → 11 KB
• WOFF2: 130 KB → 9 KB

Más del 90% de reducción sin modificar el código del proyecto.

---

Automatización total con el plugin de Vite

Aquí es donde el plugin vite-plugin-icon-font-reducer brilla. El proceso se vuelve completamente automático:

• No hay que ejecutar comandos manuales.
• No hay que generar archivos temporales.
• No hay que preocuparse por nuevos iconos añadidos al proyecto.

El plugin se integra directamente en el pipeline de Vite. Además, soporta:

• Presets de librerías.
• Archivos de configuración externos.
• Configuración inline.

Esto lo hace ideal para proyectos modernos que usan Vite pero mantienen icon fonts legacy.

---

Ejemplo de uso del plugin

Usando un preset

import { defineConfig } from 'vite'
import iconFontReducer from 'vite-plugin-icon-font-reducer'

export default defineConfig({
  plugins: [
    iconFontReducer({
      config: 'materialdesign',
    }),
  ],
})

Usando un archivo de configuración

iconFontReducer({
  config: './icon-font-reducer.config.js',
})

Usando configuración inline

iconFontReducer({
  config: {
    origin: {
      css: './node_modules/@mdi/font/css/materialdesignicons.css',
      fonts: './node_modules/@mdi/font/fonts',
    },
    expression: {
      classes: /mdi-[a-z0-9-]+/g,
      files: /\.(woff2?|ttf|eot|svg)$/i,
    },
    selector: '.mdi::before',
    property: 'content',
  },
  debug: true,
})

---

Resultados reales y métricas

En proyectos donde el peso de la fuente supera los 150 KB, las reducciones del 90% tienen un impacto directo en:

• Lighthouse
• Core Web Vitals
• Tiempo de carga en móviles
• Experiencia del usuario

Reducir una fuente de 176 KB a 11 KB puede mejorar el LCP en varios cientos de milisegundos, especialmente en conexiones lentas.

---

Conclusión

Los icon fonts fueron una solución brillante en su momento, pero hoy representan un problema de rendimiento en muchos proyectos legacy. Migrar a SVG no siempre es viable, pero optimizar sí lo es.

Herramientas como icon-font-reducer permiten modernizar sin romper nada, y su plugin vite-plugin-icon-font-reducer lleva esa optimización al siguiente nivel: automatización total dentro del build de Vite.

Si un proyecto usa icon fonts y quiere mejorar su rendimiento sin una refactorización completa, esta combinación es la solución perfecta.