FlowingDev

@font-face, explicado: enseñando a los navegadores a hablar tu tipografía

Domina la regla @font-face de CSS para entregar web fonts personalizadas eficientemente usando font-display, preloading, unicode-ranges y pesos variables.

Probar la herramienta: Generador de @font-face

En una oración

@font-face es la regla de CSS que le permite a un navegador web descargar y renderizar tipografía personalizada, liberando por fin a los diseñadores de la tiranía de la media docena de fuentes "seguras para la web" preinstaladas en cada computadora.

El problema que resuelve

Si hacías sitios web a finales de los 90s o principios de los 2000s, la tipografía web era un panorama sombrío y desolador. Estabas a merced de las fuentes que de casualidad vivieran en el sistema operativo del usuario. Escribías font-family: Arial, Helvetica, sans-serif; y te ponías a rezar. Si un diseñador te pasaba un mockup en Photoshop con una fuente serif hermosa y a medida para los títulos, tenías tres opciones terribles:

  1. El hack de la imagen: Cortar el título en Photoshop y servirlo como una etiqueta <img>. El SEO lo odiaba. Los lectores de pantalla (screen readers) no podían verlo. Más tarde, las pantallas Retina los convertirían en un desastre borroso.
  2. sIFR (Scalable Inman Flash Replacement): Un parche satánico que usaba JavaScript para buscar texto, ocultarlo e incrustar una mini película de Adobe Flash que renderizaba exactamente el mismo texto con una fuente personalizada. Era pesado, estaba lleno de bugs y derretía las baterías de las laptops.
  3. Cufón: Una librería de JavaScript que convertía los trazos de la fuente en gráficos vectoriales y los renderizaba en un <canvas>. Hermoso, pero no podías seleccionar ni copiar el texto fácilmente.

La W3C de hecho propuso @font-face allá por CSS2 (1998), pero los navegadores no se ponían de acuerdo en los formatos, y las fundiciones tipográficas le tenían terror a la piratería (si ponías un archivo .ttf en un servidor, cualquiera podía descargarlo).

No fue sino hasta la década de 2010, con la adopción masiva del Web Open Font Format (WOFF) —un formato comprimido y hecho específicamente para la web— que @font-face se volvió una realidad práctica. Hoy en día, @font-face no solo carga fuentes; orquesta un complejo baile de peticiones de red (network requests), caching, subsetting y estrategias de renderizado para mantener tu sitio ridículamente rápido mientras se ve exactamente como el diseñador lo imaginó.

Cómo funciona por debajo

En el fondo, @font-face es un set de instrucciones. Mapea un nombre que tú inventas a un archivo que está alojado en un servidor.

La anatomía de la regla

Una declaración de @font-face moderna y lista para producción se ve más o menos así:

@font-face {
  font-family: 'MyAwesomeFont';
  src: local('MyAwesomeFont Regular'), 
       url('/fonts/myawesomefont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Desmenucemos la magia dentro de este bloque.

Los formatos y el monopolio de WOFF2

Fíjate en el format('woff2'). En la era oscura, los devs teníamos que meter un stack gigante "a prueba de balas" con .eot (para el prehistórico Internet Explorer), .ttf (para Safaris o Androids viejísimos), .svg (para el iOS legacy) y .woff.

Hoy, la web corre sobre WOFF2. Usa compresión Brotli, lo que resulta en archivos más o menos un 30% más livianos que su predecesor, WOFF. Como WOFF2 tiene un soporte casi universal en navegadores (más del 97% globalmente), por lo general solo necesitas servir un único archivo .woff2, y tal vez un fallback a WOFF estándar si tus usuarios usan máquinas empresariales muy viejas.

Controlando el "Flash" (font-display)

Cuando un navegador se topa con un texto estilizado con una custom font, pero el archivo de la fuente todavía no se termina de descargar, tiene que tomar una decisión. ¿Muestra el texto con una fuente de respaldo (fallback)? ¿U oculta el texto hasta que llegue la fuente personalizada?

Esto crea dos acrónimos infames: FOUT (Flash of Unstyled Text) y FOIT (Flash of Invisible Text). El descriptor font-display te deja dictar este comportamiento.

font-display Comportamiento Cuándo usarlo
auto El default del navegador (suele bloquear el renderizado por hasta 3 segundos). Nunca, si te importa la performance.
swap Muestra inmediatamente la fuente fallback (FOUT), y luego hace el swap a la custom font cuando está lista. Texto del body, artículos, elementos de UI. Los usuarios pueden empezar a leer enseguida.
block Oculta el texto (FOIT) por un periodo corto, luego muestra el fallback, y por último el swap. Íconos o logos donde un fallback se vería como un galimatías roto.
fallback Bloqueo corto, periodo de swap corto. Si tarda demasiado, aborta la custom font por completo en esa carga de página. Texto decorativo en conexiones más lentas.
optional Bloqueo extremadamente corto. Si la fuente no está en caché o no carga rapidísimo, se rinde por completo. Fuentes que "sería lindo tener" donde la estabilidad del layout es lo primordial.

Subsetting con unicode-range

Un archivo de fuente completo que contenga glifos latinos, cirílicos, griegos y los complejos CJK (chino, japonés, coreano) puede pesar megabytes.

La propiedad unicode-range es una herramienta de optimización genial. Le dice al navegador: "Este archivo de fuente solo cubre estos caracteres específicos". Si pones unicode-range: U+0000-00FF (Latin básico), el navegador va a parsear tu HTML. Si no encuentra ningún caracter latino, ni siquiera va a descargar el archivo de la fuente. Esto te permite partir fuentes gigantes en pedacitos chiquitos por idioma, cargando solo lo que el usuario realmente necesita.

Variable Fonts

Tradicionalmente, si querías Regular, Italic, Bold y Bold Italic, tenías que cargar cuatro archivos .woff2 separados.

Las variable fonts empaquetan toda una familia en un solo archivo definiendo "ejes de variación". En lugar de pesos estáticos como 400 o 700, una variable font puede renderizarse con un peso de 432 o 781. 

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myfont-var.woff2') format('woff2');
  font-weight: 100 900; /* Acepta cualquier peso entre 100 y 900 */
}

Base64 Embedding vs. Preloading

A veces, el propio network request es el cuello de botella. Tienes dos estrategias avanzadas:

  1. Preloading: Agregar <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> en el <head> de tu HTML le dice al navegador que traiga (fetch) la fuente inmediatamente, antes de que siquiera descargue el CSS.
  2. Base64 Embedding: Puedes convertir el archivo binario de la fuente en un string de texto gigante y pegarlo directamente en el url() de tu regla @font-face. Esto elimina el network request por completo, pero engorda el tamaño de tu archivo CSS alrededor de un 33%. Bloquea por completo el renderizado de la página hasta que se descarga el CSS, así que está estrictamente reservado para fuentes subseteadas, enanas y súper optimizadas (como un logo personalizado).

Historias del mundo real

El botón invisible del E-commerce

Un e-commerce boutique decidió usar una icon font personalizada para su interfaz. Usaron una declaración @font-face estándar sin font-display. Con una buena conexión Wi-Fi de oficina, todo se veía espectacular.

Sin embargo, los usuarios móviles en redes 3G estaban rebotando del sitio a tasas récord. Cuando los devs simularon una red lenta, encontraron al culpable: el navegador estaba esperando que cargara la icon font para poder renderizar el botón de "Agregar al carrito". Esto terminaba en un Flash of Invisible Text (FOIT) de 4 segundos. Los usuarios, literalmente, no podían ver el botón para darle dinero a la empresa. Con solo agregar font-display: swap; para el texto y hacer un preload de la icon font, salvaron su conversion rate.

La tragedia tipográfica de múltiples megabytes

Un famoso blog de tecnología decidió soportar internacionalización. Para asegurarse de que su elegante tipografía se mantuviera consistente, incluyeron una inmensa fuente Noto Sans que cubría todos los caracteres CJK (chino, japonés, coreano). El archivo de la fuente pesaba casi 6MB.

De la nada, los usuarios de EE. UU. que leían artículos en inglés puro se empezaron a quejar de tiempos de carga lentísimos. Sus navegadores estaban descargando 6MB de glifos japoneses y coreanos para leer un artículo sobre JavaScript. El equipo implementó unicode-range. Partieron la fuente en un subset latino de 30KB y un subset CJK de 5.9MB. Automáticamente, el navegador solo pedía el archivo de 30KB para los lectores en inglés, curando el bajón de performance de forma instantánea.

El rediseño que temblaba

Una agencia de diseño armó un layout editorial deslumbrante usando nueve pesos diferentes de una clásica fuente sans-serif. El dev, con toda la diligencia del mundo, exportó nueve archivos .woff2 distintos y escribió nueve reglas @font-face.

Como los navegadores descargan archivos de forma asíncrona, la página aparecía a tropezones. El peso 300 cargaba primero, luego el 700, después el 400, haciendo que el layout saltara agresivamente y recalculara los saltos de línea (text wrapping) cuatro o cinco veces por segundo. El dev reemplazó los nueve archivos por una sola Variable Font (.woff2-variations). Ese único archivo era un 40% más chico que los nueve combinados, cargaba en un solo request, y renderizó la página en un solo paint (pintado) suave y fluido.

Errores comunes y trampas

  • Servir formatos de fuente prehistóricos a navegadores modernos: Deja de servir fuentes .ttf, .eot y .svg a menos que tengas una razón explícita y basada en datos para soportar IE8 o un dispositivo Android de hace una década. Quédate con WOFF2.
  • Olvidar el crossorigin en los preloads: Si usas <link rel="preload"> para una fuente, tienes que incluir el atributo crossorigin, incluso si la fuente está alojada en tu propio dominio. Por especificaciones de seguridad del navegador, las fuentes se fetchean usando el modo anónimo de CORS. Si omites el atributo, el navegador va a descargar la fuente dos veces.
  • Hacer encoding en Base64 de fuentes de body masivas: Incrustar una fuente de 100KB directamente en tu CSS infla el payload de tu CSS y bloquea el renderizado. Solo codifica fuentes chiquitas (como un subset de 5KB usado para un logo).
  • Ignorar font-display: Confiar en los defaults del navegador casi siempre castiga a los usuarios con conexiones lentas. Declara explícitamente font-display: swap para el texto de cuerpo (body text) y así priorizar la lectura sobre la estética.
  • Hacer preload de cada fuente en la página: El preloading es una instrucción de alta prioridad. Si haces preload de una fuente bold o italic para un título que vive al fondo de la página, le estás robando ancho de banda a tu JavaScript o CSS crítico, necesarios para cargar la parte superior (top of the page). Solo haz preload de la fuente "hero".
  • Abusar de local(): Usar local('Helvetica') le dice al navegador que use una copia local si es que existe. Sin embargo, las convenciones para nombrar fuentes son un mundo completamente distinto entre Mac, Windows y Linux. Lo que tú crees que es local('Helvetica Neue Bold') puede fallar silenciosamente en un sistema operativo diferente.

Por qué debería estar en tu radar

El desarrollo web es un eterno tira y afloja entre estética y performance. Estás construyendo una marca, y la tipografía es la voz de esa marca. Pero también estás creando software, y cada kilobyte cuenta para un usuario con una conexión intermitente en el metro.

Escribir la regla @font-face perfecta es famosamente tedioso. Requiere entender a fondo las rarezas de cada navegador, los MIME types, la sintaxis del subsetting y los formatos de compresión. Un generador moderno no solo te escupe la sintaxis de CSS; codifica las mejores prácticas. Genera automáticamente los archivos WOFF2, estructura los ejes variables, aplica los fallbacks correctos de font-display y arroja las etiquetas exactas de Base64 o preload necesarias para evitar cuellos de botella en la red. Se asegura de que, cuando tu aplicación hable, el navegador realmente sepa cómo pronunciar las palabras.

Profundiza

Teoría lista. Hora de ensuciarse las manos — 100% en tu navegador.

Probar la herramienta: Generador de @font-face