Respuesta corta: Las mejores fuentes para una web son las que tus visitantes leen bien y cargan rápido. Usa las menos tipografías posibles: una fuente del sistema o una fuente segura no se descarga, y una sola fuente variable cubre varios pesos. Sirve las fuentes web en WOFF2 con font-display y ajusta el tamaño de la de respaldo para que el texto no salte.
Por qué elegir fuente también es elegir velocidad
web.dev dice que las fuentes web son un cuello de botella de rendimiento que afecta a las Core Web Vitals. Cada archivo de fuente es algo que el navegador tiene que encontrar, descargar y aplicar antes de que el texto quede definitivo.
Su primer consejo es sencillo: la fuente más rápida es la que no se solicita. Las fuentes del sistema y las fuentes variables son dos formas de cargar menos fuentes web.
Formas de poner las fuentes de tu web
| Opción | Qué es | Cuándo encaja |
|---|---|---|
| Fuente del sistema | La fuente del propio dispositivo, con system-ui | Texto del cuerpo, sin nada que descargar |
| Fuente segura | Arial, Georgia, Verdana y otras presentes en casi todos los sistemas | Un aspecto conocido sin archivo de fuente |
| Fuente variable | Un solo archivo con varios pesos o estilos | Una tipografía de marca en varios pesos |
| Fuente alojada por ti | Tu archivo de fuente, servido desde tu dominio | Cuando puedes crear subconjuntos y comprimirla |
| Servicio de fuentes | Fuentes cargadas desde un proveedor como Google Fonts | Montaje rápido, con preconnect al proveedor |
De las prácticas recomendadas para fuentes de web.dev y la guía de estilos de texto de MDN, consultadas el 3 de noviembre de 2026.
Cómo elegir y cargar tus fuentes
- Usa las menos tipografías posibles, porque cada fuente de más es otro archivo que descargar.
- Para el texto del cuerpo, piensa en una fuente del sistema o en una fuente segura.
- Si tu marca necesita su propia tipografía, elige una fuente variable en lugar de varios archivos.
- Sirve tus fuentes web solo en WOFF2.
- Pon font-display en cada regla @font-face; swap muestra el texto enseguida con una fuente de respaldo.
- Precarga la fuente más importante, con cuidado, o haz preconnect con el proveedor de fuentes.
- Ajusta la fuente de respaldo con size-adjust, para que el texto no se mueva cuando llegue la fuente web.
Nuestra guía del cumulative layout shift explica los saltos de texto que puede causar una fuente tardía. La guía del largest contentful paint explica lo rápido que aparece tu contenido principal.
Cómo cargan nuestras fuentes
Leímos las fuentes de nuestra página de inicio el 3 de noviembre de 2026, como visitantes. Los títulos y el texto piden Satoshi, seguida de fuentes de respaldo y, al final, de las fuentes del sistema del dispositivo.
La página descarga un solo archivo de fuente: Satoshi como WOFF2 variable de 42,588 bytes, desde nuestro propio dominio. Está precargada en el HTML y su regla @font-face usa font-display: swap.
Nuestras fuentes de respaldo son Roboto o Arial locales con size-adjust entre el 96.9% y el 106.3%. Así el texto se acerca al tamaño de Satoshi mientras llega el archivo.
Antes de dar por cerradas tus fuentes
- El sitio carga solo las fuentes que usa.
- Los archivos de fuentes web son WOFF2.
- Cada regla @font-face define font-display.
- La fuente más importante está precargada, o su proveedor tiene preconnect.
- Las fuentes de respaldo tienen el tamaño ajustado a la fuente web.
- El texto se lee bien antes de que termine de cargar la fuente web.
RecuerdaMenos fuentes cargan más rápido: las menos tipografías posibles, WOFF2, font-display y una fuente de respaldo con el mismo tamaño.
Si quieres una tipografía que encaje con tu marca y cargue rápido, nuestro servicio de diseño web puede prepararla contigo.
Respuestas rápidas sobre las fuentes de una web
¿Cuáles son las mejores fuentes para una web?
No hay una sola mejor. Para la velocidad, web.dev apunta a las fuentes del sistema, que no se descargan, y a las fuentes variables, que reemplazan varios archivos por uno. Para un aspecto conocido, MDN lista fuentes seguras como Arial, Georgia y Verdana.
¿Qué son las fuentes seguras para la web?
Fuentes que están en casi todas las versiones de los sistemas operativos más usados. MDN lista Arial, Courier New, Georgia, Times New Roman, Trebuchet MS y Verdana, y advierte que Trebuchet MS no está muy disponible en los sistemas móviles.
¿Qué hace font-display: swap?
MDN describe swap como un periodo de bloqueo muy corto y un periodo de cambio infinito para la fuente. En la práctica, el navegador muestra tu texto con una fuente de respaldo enseguida y pasa a la fuente web en cuanto llega.
¿Conviene alojar mis fuentes o usar Google Fonts?
Las dos opciones pueden funcionar. web.dev dice que alojarlas tú debería rendir mejor en teoría, pero en la práctica la diferencia no es tan clara. Si las alojas tú, aplica subconjuntos y WOFF2; si usas un proveedor, haz preconnect con él.
¿Cuántas fuentes debe usar una web?
Las menos posibles. web.dev dice que la fuente más rápida es la que no se solicita, y que las fuentes del sistema y las variables reducen la cantidad de fuentes web. Nuestro sitio carga un solo archivo de fuente variable.
Fuentes
Consultadas el 3 de noviembre de 2026. web.dev: Prácticas recomendadas para fuentes. MDN Web Docs, en inglés: Fundamental text and font styling y font-display CSS at-rule descriptor. Nuestro caso: las fuentes que carga nuestra página de inicio, leídas como visitantes el 3 de noviembre de 2026.