Desarrollo18 de agosto de 2026

Técnicas avanzadas de optimización de fuentes web

Los desarrolladores web llevan años usando fuentes personalizadas. Como estas fuentes no vienen instaladas en el sistema operativo, tienen que cargarse con la web y, por tanto, deben hacerlo rápido y verse igual en todas las plataformas. Un ejemplo habitual es Google Web Fonts, una biblioteca de fuentes optimizadas para la web en formato Web Open Font Format (WOFF2), que ofrece una compresión excelente para reducir al mínimo su peso.

En la práctica, sin embargo, una fuente de Google Web Fonts suele pesar entre 20 y 30KB. Si lo multiplicas por varios estilos y grosores, enseguida llegas a 100–150KB en tu web. Otra pega de las fuentes personalizadas es que provocan un salto de layout visible mientras carga la página.

En este artículo te contamos técnicas avanzadas para que tu web sea más rápida y ofrezca una mejor UX con fuentes web.

Lo básico, en un momento

Antes de pasar a las técnicas avanzadas, repasemos rápidamente lo básico. Esta es una checklist de buenas prácticas que puedes seguir:

Usa Google Web Fonts siempre que puedas.
Si usas una fuente personalizada, intenta pasarla por Font Squirrel para comprimirla mejor y corregir la línea base vertical.
Usa WOFF2 si incrustas una fuente manualmente. WOFF2 tiene un soporte muy amplio (más del 97 %) y comprime mucho mejor que otros formatos.
Usa <link rel="preload" href="/fonts/usual/usual-semi-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous"> para dar prioridad a la fuente en la cola HTTP. Más información.
Asegúrate de que la fuente se guarda en cache con cache-control: public, max-age=31536000, immutable. Si usas Vercel, Netlify o Gatsby Cloud, lo más probable es que ya tengas buenas políticas de cache.
Descarga la fuente y sírvela desde el mismo CDN que tu web. De nuevo, Vercel, Netlify y Gatsby Cloud ya lo hacen de serie.

Ahora sí, hablemos de optimización avanzada

Estas son algunas cosas que te ahorrarán unos KB, harán que las fuentes se vean mejor y mejorarán la UX:

Ajustes de tamaño de la fuente de respaldo
Subconjuntos personalizados
Corrección de la línea base vertical

Ajuste de métricas de la fuente de respaldo

Usar fuentes personalizadas que no forman parte del sistema operativo tiene un coste. El navegador no conoce los parámetros de una fuente hasta que la ha cargado; mientras tanto, usa una fuente de respaldo (por ejemplo, Arial o Times New Roman) para calcular el tamaño de los elementos con texto de la página. Pero en cuanto la fuente se carga, el tamaño se recalcula.

La diferencia puede ser enorme y los saltos de layout se notan, sobre todo con una conexión lenta.

Este ejemplo compara dos fuentes: Times New Roman y una fuente personalizada llamada Usual. Ambas tienen un tamaño de 16px y un interlineado de 1.2, pero fíjate en la diferencia de longitud con el mismo texto.

Hace poco se han generalizado algunas propiedades CSS nuevas para igualar las métricas de la fuente de respaldo y la personalizada.

ascent-override

descent-override

line-gap-override

Suena genial, pero ¿cómo las igualas? Katie Hempenius y Kara Erickson, del equipo Aurora de Google, crearon un algoritmo para ello, pero para sacarle todo el partido hacen falta soluciones automatizadas. El equipo de Next.js anunció hace poco que lo incorpora en el paquete @next/font actualizado de la v13. Fontpie sigue el mismo enfoque: es una CLI que envuelve este algoritmo y genera el CSS necesario para ajustar las métricas de la fuente de respaldo.

Es muy fácil de usar. Este es un comando de ejemplo:


npx fontpie ./roboto-regular.woff2 --name Roboto

Al ejecutarlo, obtienes el siguiente CSS, que puedes incluir en tu proyecto sea cual sea el framework o el lenguaje que uses:


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('roboto-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman');
  ascent-override: 84.57%;
  descent-override: 22.25%;
  line-gap-override: 0%;
  size-adjust: 109.71%;
}
html {
  font-family: 'Roboto', 'Roboto Fallback';
}

Esta solución CSS funciona así: (1) declaramos un nuevo font face, Roboto; (2) después declaramos otro font face llamado «Roboto Fallback» que usa la fuente local Times New Roman con los ajustes de métricas aplicados. Con esto se elimina por completo el salto de layout.

Como ves en la imagen, Times New Roman con los ajustes de métricas ocupa ahora el mismo espacio que la fuente Usual.

Esta técnica es compatible con todos los navegadores modernos salvo Safari.

Subconjuntos personalizados

Esta técnica reduce el número de caracteres incluidos en una fuente. Las fuentes suelen traer muchos más caracteres de los que necesita tu proyecto, así que usar un subconjunto con solo lo imprescindible puede reducir mucho su peso.

Google Web Fonts tiene una API muy práctica para crear subconjuntos de una fuente. Como ejemplo, tomemos la fuente Space Grotesk. Su variante Regular (400) pesa 15KB en formato WOFF2. El enlace para incrustarla queda así


<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet" />

Para definir un subconjunto, basta con añadir el parámetro &text a la URL; por ejemplo:


<link
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk
&display=swap&text=HelloWorld"
  rel="stylesheet"
/>

Es especialmente útil cuando tienes un único titular «con estilo» en una fuente distinta a la del resto de la web. En ese caso, puedes definir un subconjunto que incluya solo los caracteres de ese titular. En el ejemplo anterior, el subconjunto personalizado dejó la fuente en 1KB.

La captura de abajo muestra cómo se ven los caracteres cuando una letra no está en el subconjunto.

A continuación tienes subconjuntos habituales que puedes copiar y pegar en Google Web Fonts o Font Squirrel para obtener exactamente el conjunto que quieres usar.

Subconjuntos habituales: cópialos y adáptalos a lo que necesites

Minúsculas


abcdefghijklmnopqrstuvwxyz

Mayúsculas


ABCDEFGHIJKLMNOPQRSTUVWXYZ

Números

0123456789

Mayúsculas acentuadas


ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßŒŸ

Minúsculas acentuadas


àáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿıœƒ

Puntuación alternativa


¡«»¿‚„‹›

Símbolos matemáticos


ª¬±µº÷Ωπ‰⁄∂∆∏∑√∞∫≈≠≤≥

Signos tipográficos


§©®°¶·†‡•™◊ﬁﬂ

Monedas


$¢£¥ƒ€

Puntuación


!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~–—‘’“”…

Diacríticos


¨¯´¸ˆˇ˘˙˚˛˜˝

Por ejemplo, el subconjunto de Space Grotesk definido abajo incluye mayúsculas, minúsculas, números, puntuación y monedas, y la fuente resultante pesa solo 6KB.


https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!%22#$%&'()*+,-./:;%3C=%3E?@[\]^_%60{|}~%E2%80%93%E2%80%94%E2%80%98%E2%80%99%E2%80%9C%E2%80%9D%E2%80%A6$

Subconjuntos de fuentes personalizadas

La cosa empeora si usas fuentes personalizadas, como las de Adobe Fonts. Muchas no están optimizadas para la web y contienen un montón de caracteres innecesarios, así que pueden llegar fácilmente a 30KB. Font Squirrel te permite crear subconjuntos personalizados sin complicaciones: sube tu fuente en formato TTF u OTF y activa el modo Expert y el subsetting personalizado.

Crear subconjuntos es fácil: marca los que quieras conservar o escribe un carácter concreto en el campo Single Characters. Por ejemplo, el símbolo de copyright está en el subconjunto «Typographics», pero si solo necesitas ©, añádelo al campo Single Characters.

Corrección de la línea base vertical

Corregir fuentes con Font Squirrel

Otro posible problema al usar fuentes personalizadas, o poco optimizadas, es que la línea base vertical no sea correcta. Por ejemplo:

Estas fuentes pueden provocar espaciados incoherentes como el de arriba, donde el padding superior es menor que el inferior aunque en el CSS sea el mismo. A veces, basta con pasar la fuente por Font Squirrel para que el problema se corrija automáticamente.

Si no funciona, puedes resolverlo con Custom Adjustments. Encontrar la combinación correcta de métricas lleva su tiempo, pero soluciona el problema.

Usar Capsize

Capsize es una librería que usa los metadatos de la fuente para dimensionar el texto según la altura de sus mayúsculas, recortando el espacio sobre las mayúsculas y bajo la línea base. Aplica reglas CSS con los pseudoelementos :before y :after, ajustando margin-top y margin-bottom para que el texto encaje perfectamente en su caja y ocupe todo el espacio.

Resultado de ejemplo:


// For 48px
.css-dpa7xb::before {
  content: '';
  margin-bottom: -0.1432em;
  display: table;
}
.css-dpa7xb::after {
  content: '';
  margin-top: -0.2142em;
  display: table;
}
// For 24px
.css-1m2jnlz::before {
  content: '';
  margin-bottom: -0.322em;
  display: table;
}
.css-1m2jnlz::after {
  content: '';
  margin-top: -0.393em;
  display: table;
}

Es una solución facilísima de usar que funciona siempre. Solo requiere CSS adicional para cada tamaño de fuente que uses en la página. Aun así, te recomiendo probar primero las correcciones automáticas de Font Squirrel y recurrir a Capsize si hace falta.

Resumen

Repasemos lo que hemos visto en este artículo:

Ajustar las métricas de la fuente de respaldo es un arreglo rápido y sencillo que puedes aplicar en cualquier proyecto con una herramienta específica de métricas de fuentes o con next/font.
Elimina los subconjuntos de la fuente que no necesites, sobre todo si usas una fuente personalizada con estilo en la sección Hero solo con fines de diseño.
Vigila la línea base vertical de la fuente e intenta corregirla si ves que tienes que poner un padding superior e inferior distinto en un botón para que el texto parezca centrado.