Las tipografías personalizadas le dan estilo a tu web, pero si abusás de ellas, vas a pagar el precio en velocidad. Te muestro cómo elegir mejor, cargar menos y optimizar al máximo.
¿Por qué las fuentes personalizadas pueden ser un problema?
Una sola fuente personalizada puede pesar entre 100KB y 400KB (o más si viene con todos los estilos). Si cargás varias familias, pesos o variantes, el impacto en la velocidad de tu sitio es enorme.
Además, hasta que las fuentes cargan, los navegadores suelen aplicar un fallback... o peor, mostrar todo en blanco (el temido FOIT: Flash of Invisible Text).
¿Cuántas fuentes conviene usar?
Lo ideal es usar una sola familia tipográfica, o como mucho dos (una para títulos y otra para cuerpo). Además:
- Limitá la cantidad de pesos que cargás (ej: regular, bold, italic).
- Evitá cargar estilos que no vas a usar (¿realmente necesitás
700 italic?).
¿Cómo optimizar su carga?
Si usás Google Fonts (o cualquier otro proveedor externo):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">Esto ayuda a acelerar la conexión y carga de la fuente. Y el parámetro display=swap evita que el texto quede invisible mientras se descarga.
¿Y si las tenes en tu servidor?
En ese caso:
- Convertí las fuentes al formato WOFF2, el más moderno y liviano.
- Usá la propiedad
font-display: swap;en tu CSS para que el texto se muestre rápido. - Precargá las fuentes con
<link rel="preload">:
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>¿Qué pasa si quiero mantener el estilo?
No se trata de no usar fuentes personalizadas, sino de usarlas con criterio. Podés lograr un diseño atractivo con solo una familia bien aplicada. Incluso algunas fuentes del sistema se ven geniales y cargan al instante.
Fuentes del sistema que podés considerar
- San Francisco (Apple), Segoe UI (Windows), Roboto (Android), system-ui: todas tienen buena legibilidad y performance.
- Usar
font-family: system-ui, sans-serif;es una excelente opción rápida y confiable.
Conclusión
Las fuentes personalizadas tienen su encanto, pero si te pasás con ellas, tu sitio se va a resentir. Menos familias, menos pesos, y una carga inteligente marcan la diferencia. Optimizar tipografías es optimizar experiencia 😉
