Las fuentes web aportan personalidad a tu sitio, pero también agregan peso.
Y si tus fuentes tardan demasiado en cargarse, los usuarios se quedan mirando una pantalla en blanco. Aún peor, tu sitio podría parecer inestable mientras el texto se desplaza de forma inesperada.
Esto también perjudica las Métricas Web Principales, las métricas que afectan directamente tu clasificación en los motores de búsqueda y la experiencia del usuario.
Aquí, cada milisegundo cuenta.
Entonces, ¿cómo puedes mantener tu elección de fuentes web sin sacrificar el rendimiento?
Vamos a desglosarlo, paso a paso.
Pero primero, ¿qué son exactamente las fuentes web seguras y las fuentes web?
¿Qué Son las Fuentes Web Seguras?
Las fuentes web seguras son las opciones probadas y confiables que funcionan en todos los dispositivos. Son fuentes que la mayoría de los dispositivos ya tienen, lo que significa que puedes contar con ellas para cargar rápidamente.
Estas son las fuentes web seguras que puedes usar:
- Arial
- Times New Roman
- Verdana
- Trebuchet MS
- Courier
- Impact
- Georgia
- Comic Sans MS
Aunque las opciones son limitadas, un diseñador hábil puede utilizar estas fuentes de manera creativa.
Sin embargo, las fuentes web seguras a menudo se usan en exceso y le dan a tu sitio web una sensación “similar”, incluso cuando has invertido mucho esfuerzo y dinero en el diseño del sitio.
Entonces, ¿cómo lo haces más atractivo?
Con fuentes web.
¿Qué Son Las Fuentes Web?
Las fuentes web te permiten alejarte de las fuentes web seguras, que a menudo se usan en exceso.
En lugar de depender de las fuentes disponibles en el dispositivo del usuario, las fuentes web pueden descargarse desde una fuente externa como Google Fonts o directamente desde tu servidor al dispositivo del usuario (temporalmente).
Esto te permite usar cualquier fuente personalizada que se ajuste a tu marca o necesidades de diseño.
También hemos recopilado las mejores fuentes de Google para ayudarte a comenzar.
Cuando un usuario visita tu sitio, la fuente web se descarga temporalmente y se aplica al texto utilizando la regla @font-face en CSS.
Las fuentes web luego comienzan a comportarse como fuentes locales: se ajustan automáticamente al tamaño de la pantalla manteniendo tu sitio web nítido.
Las fuentes también han evolucionado con el tiempo para tener formatos de almacenamiento más eficientes. Al igual que los formatos de imagen, las fuentes tienen TTF, WOFF, WOFF2 y EOT.
- Embedded OpenType (EOT): Compatible con versiones antiguas de Internet Explorer (por debajo de IE9). No se comprime por defecto, pero se puede aplicar compresión GZIP.
- TrueType (TTF): Compatible con navegadores Android antiguos (por debajo de la versión 4.4). No está comprimido por defecto, pero se puede comprimir con GZIP.
- Web Open Font Format (WOFF): Compatible con la mayoría de los navegadores modernos e incluye compresión integrada.
- Web Open Font Format 2 (WOFF2): Compatible con los navegadores que lo soportan, con algoritmos de compresión personalizados que reducen el tamaño del archivo en alrededor del 30% en comparación con otros formatos.
Los formatos modernos ofrecen compresión para un mejor rendimiento y ayudan a mantener el diseño de tu sitio tanto funcional como visualmente distintivo.
¿Qué son las Métricas Web Principales (MWP)?
Aquí está la cuestión: Google quiere que todos sus usuarios tengan una experiencia excelente.
El sitio web o la aplicación que ofrezca la mejor experiencia a los usuarios de Google recibirá más “preferencia” de los algoritmos de Google.
¿Y cómo se mide esta “experiencia“?
Google lanzó Core Web Vitals o Métricas Web Principales a principios de 2020 con ese propósito.
MWP es un conjunto de tres métricas que le indican a Google cómo se desempeña tu sitio web o aplicación para los usuarios que llegan allí.
Puntuaciones más altas en estas métricas pueden ayudarte a mejorar tu posición en Google. Repasemos rápidamente estas métricas.
Largest Contentful Paint (LCP)
LCP mide cuánto tiempo tarda en cargarse el elemento más grande y visible en tu página.
Generalmente, esto es una imagen o video, pero también podría ser un bloque grande de texto o un video incrustado.
Cuanto más rápido ocurra esto, mejor será el rendimiento de tu sitio tanto para los usuarios como para los motores de búsqueda.
Una buena puntuación de LCP significa que los usuarios no se quedan esperando a que aparezca el contenido principal.
Interaction to Next Paint (INP)
INP mide el tiempo entre la interacción de un usuario (como hacer clic o tocar) y cuando la página responde visualmente.
Ofrece una imagen más precisa de la interactividad que el FID, ya que considera todo el recorrido del usuario en lugar de solo la primera interacción.
Una puntuación baja de INP significa que tu sitio se siente más receptivo, mejorando el compromiso y la satisfacción del usuario.
Cumulative Layout Shift (CLS)
CLS mide qué tan estable es tu página mientras se carga.
Cuando los elementos se mueven inesperadamente, frustra a los usuarios y hace que la página se sienta poco confiable.
Una puntuación baja de CLS significa que tu página se carga de manera fluida, sin desplazamientos de diseño que interrumpan la experiencia del usuario.
[KLAV]
Cómo Optimizar las Fuentes Web Para Mejorar las Métricas Web Principales
Entonces, ¿por qué tanto alboroto sobre el rendimiento de las fuentes web?
¿Por qué no simplemente agregar fuentes web y listo? Bueno, puedes.
Pero como hemos hablado antes, las fuentes web no son locales. Se obtienen desde un servidor, se descargan y se aplican a tu sitio, y ahí es donde está el problema.
Toma tiempo.
Y si tarda demasiado, afecta tus Métricas Web Principales y la tasa de conversión de tu sitio web.
Veamos algunas formas de optimizar las fuentes web para mejorar las Métricas Web Principales.
1. Pre-cargar las fuentes
Quieres que tus fuentes estén listas en el momento en que la página comience a cargarse.
Así, cuando la página esté lista para el usuario, también lo estará la fuente.
Eso se llama pre-carga.
La pre-carga le dice al navegador: “Oye, esta fuente es importante. Cárgala de inmediato.”
Supongamos que estás usando la popular fuente de Google, Roboto.
Necesitas agregar un solo atributo a tu código HTML para pre-cargar la fuente: rel = “preload”
| <link rel=”preload” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap” as=”font” type=”font/woff2″ crossorigin> |
Después de esto, el navegador sabe priorizar la descarga de Roboto, para que tu texto aparezca estilizado con la fuente correcta más rápido.
Esto reduce el tiempo que tarda en renderizarse el bloque de texto más grande (LCP), de modo que los usuarios ven la versión final de tu sitio más pronto.
2. Controla El Comportamiento De Carga De La Fuente Con La Propiedad Font-Display
Sin embargo, la pre-carga podría aumentar un poco el tiempo de carga inicial, ya que las fuentes tienen prioridad.
La propiedad font-display te permite controlar cómo se comporta tu texto mientras las fuentes personalizadas aún están cargando.
Esto puede ayudarte a evitar el temido Flash of Invisible Text (FOIT), donde los usuarios ven espacios en blanco, y el Flash of Unstyled Text (FOUT), donde la página aparece con fuentes de reserva por un segundo y luego cambia inmediatamente a las fuentes personalizadas.
La propiedad font-display tiene cuatro opciones para gestionar el comportamiento del texto: block, swap, fallback y optional.
Veamos las dos que necesitarías.
font-display: swap — Esta opción es la apuesta más segura para la mayoría de los sitios. Asegura que el texto aparezca de inmediato con una fuente de reserva y luego cambie a la fuente personalizada una vez que esté lista.
| @font-face { font-family: ‘Roboto’; src: url(‘https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf’) format(‘truetype’); font-display: swap; } |
Aquí, la fuente de reserva (como Arial o cualquier otra fuente del sistema) se cargará instantáneamente, manteniendo la página legible.
Cuando Roboto se haya descargado, reemplazará la fuente de reserva sin dejar un espacio en blanco en la pantalla.
Aquí tienes una demostración de cómo se comporta font-display: swap en el mundo real.
font-display: optional — Si te preocupa la velocidad, esto le indica al navegador que omita la fuente personalizada si no se carga lo suficientemente rápido. Esto funciona cuando no te importa si la fuente de reserva se mantiene en su lugar.
| @font-face { font-family: ‘Roboto’; src: url(‘https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf’) format(‘truetype’); font-display: optional; } |
Esta opción tiene sentido cuando el rendimiento es más crítico que el diseño, lo que la hace perfecta para un sitio que se basa en la velocidad.
Aquí tienes un ejemplo de cómo se ve esto en el mundo real. No notarás el cambio aquí, ya que la mayoría de las fuentes se cargan lo suficientemente rápido.
Sin embargo, el argumento optional es excelente en caso de que tu servidor de fuentes se caiga o se vuelva lento.
3. Subconjuntos de fuentes
La mayoría de las fuentes vienen con cientos, incluso miles, de caracteres.
Lo más probable es que solo necesites una pequeña porción de esos caracteres. Eliminar los caracteres innecesarios se llama subconjunto de fuentes.
Así es, puedes eliminar caracteres innecesarios para reducir el tamaño del archivo de la fuente.
Supongamos que tu sitio solo necesita caracteres en inglés.
Una herramienta como FontTools puede ayudarte a crear un subconjunto de tu fuente que solo incluya los caracteres que realmente usarás.
Esto significa que todos los caracteres Unicode que no son necesarios en el idioma inglés se pueden eliminar para ahorrar espacio en el archivo.
Unicode
El estándar Unicode es un estándar de codificación internacional que hace que la codificación de los lenguajes sea uniforme a través de diferentes sistemas de escritura. Esto proporciona un número único para cada carácter, que se puede usar sin importar el dispositivo, plataforma, aplicación o idioma.
Ver másEsto reduce el tamaño del archivo de, por ejemplo, 80 KB a 30 KB.
Los archivos más pequeños significan descargas más rápidas, mejorando tanto LCP como CLS, ya que la fuente se carga rápidamente y no desplaza el diseño.
Aquí tienes un ejemplo de cómo eliminar todo lo que no sean caracteres en inglés usando FontTools:
| pyftsubset Roboto-Regular.ttf –unicodes=U+0020-007F |
Ahora, tu fuente Roboto solo contiene los caracteres latinos básicos necesarios para el texto en inglés, lo que la hace mucho más rápida de cargar.
Si prefieres un enfoque basado en GUI, también puedes probar Font Squirrel. Una vez que subas un archivo de fuente, tendrás muchas opciones de personalización para agregar o eliminar.
4. Comprimir Fuentes
Los formatos modernos de fuentes como WOFF2 ofrecen compresión que puede reducir el tamaño de la fuente hasta en un 30% en comparación con formatos más antiguos como TTF.
Usar la versión más comprimida de tu fuente puede reducir significativamente su impacto en el tiempo de carga de la página.
Por ejemplo, aquí te mostramos cómo asegurarte de que estás usando WOFF2:
| @font-face { font-family: ‘Roboto’; src: url(‘roboto.woff2’) format(‘woff2’), url(‘roboto.woff’) format(‘woff’); font-weight: 400; } |
De esta manera, los navegadores que soportan WOFF2 lo usarán por defecto, reduciendo los tiempos de carga mientras siguen mostrando una fuente nítida y de alta calidad.
Sin embargo, si un navegador no puede usar WOFF2, se utilizará WOFF como predeterminado.
5. Codificación Base64
Esta es otra práctica comúnmente utilizada para optimizar tus fuentes web.
Sin embargo, debes tener cuidado de cuándo usar fuentes codificadas en Base64.
La codificación Base64 es más útil para fuentes pequeñas o iconos.
Si se usa en exceso, puede inflar el CSS, aumentando el tiempo de carga de la página más que simplemente usar la fuente misma.
Si quieres usar la codificación Base64 para una fuente de iconos, primero convertirías el archivo de la fuente a formato Base64. Así es como podría verse:
| @font-face { font-family: ‘CustomIcons’; src: url(‘data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB…’) format(‘woff2’); font-weight: normal; font-style: normal; } |
Este método funciona bien para fuentes de iconos pequeñas que usas con frecuencia en todo el sitio.
El archivo CSS se carga con la fuente incrustada, eliminando una solicitud HTTP adicional.
Sin embargo, evita esto para fuentes grandes del cuerpo del texto, ya que puede ralentizar la representación inicial de la página.
6. <link> vs. CSS @import Para Fuentes
<link> y @import tienen una diferencia significativa en el rendimiento de carga.
La etiqueta <link> carga las fuentes de manera asíncrona, lo que significa que no retrasa la carga del resto de la página, mientras que @import es un poco más lento.
Usa <link> siempre que sea posible.
“Para más del 90% de los casos, probablemente querrás usar la etiqueta <link>. Como regla general, debes evitar las reglas @import porque retrasan la carga del recurso incluido hasta que el archivo se obtenga”. Ilya Grigorik, Ingeniero y Asesor Técnico del CEO de Shopify
La etiqueta <link> carga las fuentes de forma independiente, permitiendo que el resto de la página se cargue sin esperar el archivo de la fuente.
| <link rel=”stylesheet” href= “https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap”> |
Este es el método preferido para cargar Google Fonts o servicios externos similares de fuentes.
Colocada en la sección <head> de tu HTML, asegura que la fuente comience a cargarse temprano sin bloquear otros recursos.
Evita @import para fuentes críticas.
@import espera hasta que el archivo CSS se cargue por completo, lo que puede aumentar el tiempo de carga y afectar el LCP.
| @import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap’); |
Usar @import solo funciona para fuentes secundarias o menos críticas. Como práctica, evítalo para cualquier cosa en la primera pantalla de contenido.
7. Reduce los Desplazamientos Visuales/CLS con la Coincidencia de Fuentes y Ajuste de Tamaño
Los desplazamientos visuales — o cambios de diseño acumulativos (CLS), como los llama Google — ocurren cuando el diseño cambia inesperadamente, a menudo debido a intercambios de fuentes.
Para minimizar este efecto, elige fuentes de reserva que se asemejen al estilo y las dimensiones de tu fuente personalizada.
La propiedad size-adjust de CSS también te permite controlar el tamaño de la fuente de reserva, reduciendo los desplazamientos visuales cuando se carga la fuente personalizada.
Si tu fuente personalizada es Roboto y una fuente de reserva, ajusta su tamaño para que coincida con Roboto, haciendo la transición casi imperceptible.
| @font-face { font-family: ‘Roboto’; src: url(‘roboto.woff2’) format(‘woff2’); font-display: swap; size-adjust: 100%; } |
Aquí, la fuente de reserva de Roboto (por ejemplo, Arial) mantiene un tamaño consistente, reduciendo cualquier movimiento visible cuando Roboto se carga completamente.
Una vez que alinees el tamaño y el espaciado de la fuente de reserva con tu fuente personalizada, aseguras que cuando Roboto reemplace a Arial, el cambio sea mínimo, manteniendo el CLS bajo y mejorando la experiencia del usuario.
8. Encuentra el Lugar Adecuado para Alojar las Fuentes Web
Alojar tus fuentes de manera local no siempre significa un mejor rendimiento.
Muchas opciones de terceros también funcionan bien — y a veces, incluso pueden cargar más rápido.
El Web Almanac encontró que ciertos sitios que usaban fuentes de terceros se renderizaban más rápido que aquellos con fuentes autoalojadas.
En última instancia, el rendimiento de las fuentes depende menos de la elección del alojamiento y más de tres factores clave:
- Content Delivery Network (CDN): Asegura una entrega más rápida al servir las fuentes desde múltiples ubicaciones en todo el mundo.
- HTTP/2: Aumenta la velocidad de carga al manejar múltiples solicitudes en paralelo, reduciendo la latencia.
- Política de Caché Web: Almacena las fuentes en caché de manera eficiente, para que no sea necesario volver a descargarlas con cada visita.
En lugar de quedarte atascado en el debate sobre el alojamiento, concéntrate en configurar estos elementos esenciales para mantener la carga de tus fuentes de manera fluida, sin importar dónde estén alojadas.
Cómo Simplificar la Optimización del Rendimiento Web
Si las técnicas anteriores te parecen demasiado prácticas, un plugin como Jetpack puede facilitarte las cosas.
Jetpack, desarrollado por Automattic (los creadores de WordPress), es una solución todo en uno creada específicamente para sitios de WordPress.
Combina características esenciales para seguridad, rendimiento y marketing, todo gestionado desde una sola plataforma.
Incluso si no eres técnico, Jetpack puede ayudar a mejorar la velocidad del sitio, fortalecer la seguridad y mejorar la experiencia del usuario. (¡No se requieren configuraciones complejas!)
Crea el Equilibrio Perfecto Entre Belleza y Rendimiento
Las fuentes web le dan a tu sitio un aspecto único y hermoso.
Sin embargo, sin los ajustes adecuados, también pueden ralentizarlo y frustrar a los usuarios.
Aunque hemos cubierto técnicas esenciales de optimización de fuentes, afinar el rendimiento implica una cantidad infinita de detalles técnicos.
Y obtener los mejores resultados puede sentirse abrumador.
Ahí es donde entran los Servicios Profesionales de desarrollo web de DreamHost.
Nos aseguraremos de que tu sitio sea hermoso y esté optimizado para la velocidad y la experiencia del usuario.
Déjanos manejar los detalles técnicos mientras te concentras en construir un sitio que realmente se destaque.
Tu lo Sueñas, Nosotros lo Ponemos en Código
Aprovecha más de 20 años de experiencia en codificación adquiriendo el servicio de Desarrollo Web. Solo déjanos saber qué quieres para tu sitio — nosotros nos encargamos del resto.
Ver másEsta página contiene enlaces de afiliados. Esto significa que podemos ganar una comisión si compras servicios a través de nuestro enlace, sin ningún costo adicional para ti.
