La fuente de tu sitio cuesta más caro de lo que parece

Una clienta me mandó un correo en pánico. La empresa de fuentes había detectado su sitio y le cobró una diferencia de licencia: más de 4 mil reales, porque el tráfico pasó del límite contratado tres años antes. Nadie en el equipo sabía que existía un límite. La fuente del sitio se había vuelto una cuenta por pagar.

Esto pasa más de lo que imaginas. La fuente del sitio es una de esas decisiones que parecen puramente estéticas, tomadas en cinco minutos por alguien en Figma, y que después cobran intereses en tres frentes: dinero, velocidad e identidad. Voy a desmenuzar los tres.

Por qué una fuente se cobra por pageview

Una fuente es software. No la compras, la licencias. Y las licencias de webfont suelen venderse por rango de pageviews mensuales.

Funciona más o menos así:

• Licencia de escritorio: usarla en Figma, en Illustrator, en PowerPoint. Barata.
• Licencia web: servirla en el navegador. Se cobra por rango de tráfico.
• Licencia de app: incrustarla en una aplicación. Se cobra por número de instalaciones.

El detalle cruel es que esas licencias van por separado. El diseñador compra la de escritorio, hace el layout precioso, entrega. El dev toma el archivo y lo sube al sitio. Nadie compró la licencia web. Pasan dos años, el sitio crece, y llega el correo.

En las fundiciones grandes, una familia completa con licencia web para tráfico medio sale entre 500 y 3 mil dólares. Si tienes sitio, app y material impreso, multiplica. Para una empresa que factura bien, es ruido. Para un SaaS que está empezando, es un mes de infra.

La fuente gratuita se volvió buena de verdad

Hace diez años, "fuente gratuita" quería decir Arial o algo de Google Fonts que gritaba "plantilla". Eso cambió.

Nebula Sans es un buen ejemplo de lo que existe hoy. Es una familia sans serif gratuita, con licencia abierta, y no parece gratuita. Tiene el rango completo de pesos, funciona como fuente variable (un solo archivo cubre del light al black, sin necesidad de cargar seis archivos), y el dibujo es lo bastante neutro para interfaz sin ser soso. El soporte de acentos está ahí, lo que ya elimina la mitad de las opciones extranjeras para quien escribe en español.

No es la única. Inter, Geist, Public Sans, Instrument Sans, Söhne (esa es de pago, pero la cito porque mucha gente se confunde). El punto es que el argumento "necesito pagar caro para tener una tipografía decente" murió.

Una fuente cara no hace bueno al producto. Una fuente equivocada hace lento al producto.

El peso que nadie mide

Aquí está la parte que los informes de rendimiento no cuentan bien.

Una familia de fuente con cuatro pesos, en formato WOFF2, cubriendo latin y latin-extended, da entre 60 y 120 KB. Parece nada. Solo que la fuente bloquea el renderizado. El navegador descarga el CSS, descubre que necesita la fuente, pide la fuente, y mientras no llega el texto queda invisible o parpadea cambiando de forma. Ese efecto de "el sitio cargó y el texto saltó" tiene nombre: es la fuente llegando tarde y reflowando el layout.

Eso entra directo en el Cumulative Layout Shift, que es una de las métricas que Google usa para rankear. Y entra en la percepción del usuario, que es la métrica que más importa.

Tres cosas que resuelven casi todo:

1. Aloja la fuente en tu dominio. Cargarla de Google Fonts añade una conexión a otro servidor. Desde que los navegadores separaron la caché por sitio, aquel argumento de "el usuario ya la tiene en caché de otro sitio" no vale nada.
2. Usa fuente variable. Un archivo en lugar de cuatro. Menos peticiones, menos peso.
3. Configura bien el fallback. font-display: swap más una fuente de sistema con métricas parecidas. El texto aparece de inmediato, y el cambio es casi imperceptible.

Hice esto en un sitio de e-commerce el año pasado. Pasamos de tres archivos de fuente cargados desde un CDN externo a un archivo variable local. El Largest Contentful Paint bajó de 2,8s a 1,6s. Solo la fuente. Ningún otro cambio.

La parte que de verdad importa: ¿el sitio parece tuyo?

Ahora la parte incómoda de admitir. Si usas la misma fuente gratuita que usa todo el mundo, tu sitio va a parecerse al de todo el mundo.

Existe una estética de SaaS que ya es chiste interno entre diseñadores. Inter en el texto, degradado morado, ilustración isométrica, badge de "Nuevo" con bordecito redondeado. ¿Bonito? Sí. ¿Memorable? No. Si cambio el logotipo de tres de esos sitios, nadie se da cuenta.

La tipografía es lo más barato que existe para diferenciar una marca. No necesitas una fuente exclusiva dibujada a medida. Necesitas una elección con intención:

• Una sans neutra para el cuerpo del texto, porque la legibilidad no es lugar para la creatividad.
• Una fuente con personalidad en los títulos. Puede ser una serif, una display, una grotesca con detalles raros. Es aquí donde aparece la marca.
• Escala consistente. No seis tamaños al azar porque cada pantalla se hizo un día distinto.

Esa combinación de dos fuentes, una neutra y una con opinión, resuelve el 90% de los casos y cuesta cero si eliges bien entre las gratuitas.

Cómo decidir sin volverlo un proyecto de tres meses

Si estás montando o rehaciendo un producto ahora, el camino corto es este:

Empieza por la lectura. Abre tu texto real, no el "Lorem ipsum", en la fuente candidata. Un párrafo de tu FAQ, una tabla de precios, una pantalla de error. Si cansa leer, se descarta.

Prueba los números. Muchos SaaS muestran valores, fechas, métricas. Una fuente con números de ancho variable desalinea columnas de tabla. Busca soporte de tabular-nums. Es un detalle de diez segundos que evita un bug visual eterno.

Revisa los acentos. Escribe "acción", "corazón", "año", "español". Ya he visto fuentes extranjeras premium con la tilde y la eñe dibujadas de cualquier manera, casi pegadas a la letra.

Lee la licencia antes de descargar. Si es SIL Open Font License, estás libre: puedes usarla en web, app, producto comercial, sin límite de tráfico. Si es licencia de fundición, busca la línea de pageviews y compárala con tu Analytics. Y guarda el PDF de la licencia en algún lugar que tu equipo encuentre dentro de dos años.

Decide en una semana. En serio. La elección de fuente es de esas discusiones que se extienden infinitamente porque todo el mundo tiene opinión y nadie tiene criterio. Define los criterios de arriba, prueba tres opciones, elige, sigue adelante. Se puede cambiar después si te equivocaste. Es una variable de CSS.

Lo que yo haría en tu lugar

Si tu sitio hoy carga la fuente de Google Fonts, corre con tres o cuatro pesos, y nadie sabe decir quién eligió esa fuente ni por qué, tienes dos horas de trabajo por delante y una ganancia real esperando.

Descarga la fuente, alójala en tu dominio, conviértela a variable si existe versión, configura el fallback. Después abre la conversación más interesante: ¿esa fuente dice algo sobre lo que es tu empresa? Si la respuesta es "no sé", acabas de encontrar la diferencia entre un sitio que funciona y un sitio que se queda en la cabeza de quien lo visitó.

Hago este tipo de ajuste en proyectos de clientes con frecuencia, casi siempre junto con otras cosas de rendimiento e identidad que se fueron acumulando. Si quieres conversar sobre el tuyo, mira lo que hago.

Una clienta me mandó un correo en pánico: más de 4 mil reales de cobro retroactivo por culpa de la fuente del sitio.

La licencia tenía límite de pageviews. El tráfico creció, nadie en el equipo lo sabía, y la tipografía se volvió una cuenta por pagar.

Una fuente es software. No la compras, la licencias. Y que el diseñador compre la licencia de escritorio mientras el dev sube el archivo al servidor es la receta clásica de ese correo llegando dos años después.

Solo que el dinero es la parte menor. Una fuente mal cargada bloquea el renderizado, empuja el layout y tumba tus Core Web Vitals. En un e-commerce el año pasado, cambié tres archivos de un CDN externo por un archivo variable local: el LCP bajó de 2,8s a 1,6s. Ningún otro cambio.

Y está la pregunta que casi nadie hace: ¿esa fuente dice algo sobre lo que es tu empresa? Si la respuesta es "no sé", tal vez tu sitio se parezca al de todo el mundo.

Escribí el paso a paso completo en el blog, incluyendo cómo leer la licencia antes de descargar. Si quieres revisar tu caso, escríbeme.

#Tipografia #WebPerformance #DisenoDeProducto #CoreWebVitals #Branding