Optimización de fuentes de Shopify: Repare las fuentes que bloquean el procesamiento en 5 pasos

La solución más rápida para las fuentes que bloquean el renderizado

Antes de sumergirse en la optimización manual de fuentes, existe un camino más sencillo. Thunder Page Speed Optimizer maneja automáticamente la optimización de la carga de fuentes; no se requieren ediciones del código del tema:

• Pospone descargas de fuentes no críticas para que no bloqueen el procesamiento
• Aplica óptimo font-display comportamiento para visibilidad inmediata del texto
• Administra la prioridad de carga de fuentes junto con todos los demás recursos
• Funciona con cualquier tema de Shopify: Dawn, Debut, personalizado o hecho a medida

Los comerciantes suelen ver una mejora de velocidad de más de 27 puntos que incluye la optimización de fuentes como parte del paquete. Los planes comienzan en $19,99/mes con una prueba gratuita. Prueba gratis la velocidad de tu tienda para ver cómo las fuentes afectan actualmente tus puntuaciones.

Por qué las fuentes web bloquean el renderizado en Shopify

Cuando tu tienda Shopify carga una fuente web, el navegador sigue un proceso específico que crea un cuello de botella en la representación:

1. El navegador analiza el HTML y encuentra una regla CSS @font-face.
2. El navegador descubre que necesita un archivo de fuente que no esté almacenado en caché localmente
3. El navegador inicia una descarga del archivo de fuente (50-150 KB por peso)
4. El navegador oculta todo el texto que usa esa fuente hasta que se completa la descarga
5. Una vez descargado, el navegador muestra el texto, provocando un "destello" visible

Ese paso 4 es el problema. En una conexión móvil 3G, descargar una fuente de 120 KB puede tardar entre 1 y 3 segundos. Durante todo ese tiempo, el título, los títulos de los productos y el texto del cuerpo son invisible. Los usuarios ven una página en blanco con imágenes pero sin texto legible.

Este texto invisible se denomina FOIT — Flash of Invisible Text. Perjudica el LCP, porque el elemento de texto más grande no se puede medir hasta que se carga la fuente. Cuando la fuente web sustituye a la alternativa, los cambios en los saltos de línea también pueden provocar desplazamientos de diseño (CLS).

¿Qué peso tienen las fuentes de los temas de Shopify?

La mayoría de los temas de Shopify cargan más datos de fuentes de lo que los comerciantes creen:

¿Esa última fila? Lo vemos regularmente. Tiendas que cargan Google Fonts con varias familias, además de una fuente de marca personalizada y una fuente de ícono. Cada archivo es una solicitud HTTP independiente que bloquea la representación.

Solución n.° 1: use font-display para evitar el texto invisible

Para evitar el texto invisible, añade font-display: swap a las declaraciones @font-face. El navegador mostrará el texto de inmediato con una fuente del sistema y cambiará a la fuente web cuando esté cargada.

/* Before — browser hides text until font loads */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* After — text visible immediately, swaps when ready */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* ← This one line fixes FOIT */
}

Explicación de los valores de font-display

Dónde añadir font-display en Shopify

En la mayoría de los temas de Shopify, las fuentes se declaran en el archivo CSS del tema o en el archivo de diseño theme.liquid. Así puedes encontrarlas y corregirlas:

1. Ir a Tienda Online → Temas → Editar Código
2. Buscar @font-face en todos los archivos (marque base.css, theme.css, y theme.liquid)
3. Añade font-display: swap; a cada declaración @font-face.
4. Si usa Google Fonts a través de una URL, agregue &display=swap al parámetro URL

<!-- Google Fonts: add &display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Solución n.º 2: cargue previamente su fuente más importante

Incluso con font-display: swap, todavía hay un retraso antes de que la fuente web reemplace la alternativa. La precarga de fuentes le indica al navegador que comience a descargar el archivo de fuentes inmediatamente : incluso antes de analizar el CSS.

<!-- Add to theme.liquid <head> section -->
<link rel="preload" 
      href="{{ 'mybrandfont-regular.woff2' | asset_url }}" 
      as="font" 
      type="font/woff2" 
      crossorigin="anonymous">

La precarga de la fuente del cuerpo principal normalmente reduce el retraso en el intercambio de fuentes entre 200 y 500 ms porque el navegador inicia la descarga durante el análisis de HTML en lugar de esperar hasta encontrar la regla CSS. Para obtener más información sobre cómo funcionan la precarga, la preconexión y la captación previa en Shopify, consulta nuestra guía de sugerencias de recursos.

Solución n.º 3: subconjunto de fuentes para eliminar caracteres no utilizados

Una fuente web estándar incluye glifos para latín, latín extendido, cirílico, griego, vietnamita y varios símbolos: más de 600 caracteres. Si tu tienda Shopify está en inglés, necesitas menos de 100 de esos caracteres.

El subconjunto de fuentes elimina los glifos no utilizados, lo que reduce drásticamente el tamaño del archivo:

Cómo crear subconjuntos de fuentes

Si utiliza Google Fonts, la creación de subconjuntos se produce automáticamente cuando utiliza la URL para insertar estándar: Google solo ofrece los subconjuntos de caracteres que necesita el navegador. Para fuentes autohospedadas, utilice estos enfoques:

Opción 1: Ayudante de Google Webfonts (más fácil)

1. Visita Ayudante de fuentes web de Google
2. Busca tu fuente
3. Seleccione solo los conjuntos de caracteres que necesita (normalmente "latinos")
4. Selecciona solo los pesos que utilizas
5. Descargue los archivos WOFF2 optimizados
6. Sube los archivos a la carpeta assets de tu tema de Shopify.

Opción 2: pyftsubset (para fuentes personalizadas)

# Install fonttools
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset MyFont.ttf \
  --output-file=MyFont-subset.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"

Opción 3: rango Unicode en CSS (subconjunto a nivel de navegador)

Incluso sin subconjuntos a nivel de archivo, puede indicarle al navegador qué caracteres cubre un archivo de fuente. Luego, el navegador solo descarga el archivo si esos caracteres aparecen en la página:

@font-face {
  font-family: 'MyBrandFont';
  src: url('mybrandfont-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

Solución n.º 4: convertir al formato WOFF2

WOFF2 es el formato de fuente web más comprimido y ofrece archivos entre un 30 y un 50 % más pequeños en comparación con WOFF y un 70 % más pequeños que TTF/OTF. Todos los navegadores modernos admiten WOFF2 (más del 98% de soporte global).

Revisa tu tema de Shopify para ver si hay archivos de fuentes en formatos más antiguos:

• .ttf / .otf — Sin comprimir, 2-3 veces más grande que WOFF2. Convierta inmediatamente.
• .guau : algoritmo comprimido pero más antiguo. WOFF2 es entre un 20 y un 30 % más pequeño.
• .eot : formato solo IE. Eliminar por completo: IE está muerto.
• .woff2 — Ya es óptimo. Manténgalo como está.

Muchos temas de Shopify todavía incluyen formatos de fuente alternativos para mayor compatibilidad. En 2026, podrá utilizar solo WOFF2 de forma segura y eliminar las descargas de archivos adicionales:

/* Old approach (unnecessary in 2026) */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
       url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

/* Modern approach — WOFF2 only */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Solución n.º 5: reducir el peso y las familias de fuentes

Cada peso de fuente es una descarga de archivo independiente. La optimización más rápida suele ser la más sencilla: usa menos fuentes.

Audite su uso actual de fuentes

Abre tu tienda en Chrome DevTools (F12) → pestaña Red → filtra por "Fuente". Verás todos los archivos de fuentes que se cargan. Hallazgos comunes:

• Carga de pesos no utilizados — El tema carga 300, 400, 500, 600, 700, 800 pesos pero solo usa 400 y 700. Elimina el resto.
• Variantes en cursiva que nadie usa : a menos que su diseño utilice específicamente texto en cursiva, no cargue archivos de fuentes en cursiva.
• Familias de fuentes duplicadas : algunos temas cargan tanto la fuente alojada de Shopify como una versión de Google Fonts de la misma fuente.
• Fuentes de iconos — Si solo usas 10 iconos de Font Awesome (180KB), cambia a SVGs en línea en su lugar.

El mínimo práctico

Para la mayoría de las tiendas Shopify, necesitas:

• Texto del cuerpo: 1 fuente, 2 pesos (normal 400 + negrita 700)
• Encabezados: Misma fuente o 1 fuente adicional, 1 grosor (negrita o seminegrita)
• Total: 2-3 archivos de fuentes = 30-60 KB

Eso es todo. Tres archivos de fuentes que cubren todo tu diseño. Compare eso con los 8 a 12 archivos que cargan muchas tiendas: puede reducir la carga útil de fuentes en un 70% simplemente eliminando lo que realmente no usa.

Fuentes de alojamiento propio frente a fuentes de Google en Shopify

Google Fonts es conveniente, pero autoalojar tus fuentes desde la CDN de Shopify es más rápido por dos razones:

1. Sin búsqueda DNS adicional — Cargar desde fonts.googleapis.com requiere una búsqueda DNS y una conexión TLS con los servidores de Google. Si alojas las fuentes en la carpeta assets del tema, utilizas el CDN de Shopify, al que el navegador ya está conectado.
2. Sin CSS que bloquee el renderizado — La etiqueta de Google Fonts <link> carga un archivo CSS que bloquea el renderizado. Con fuentes alojadas en el tema, puedes integrar las declaraciones @font-face directamente en su CSS y eliminar esa solicitud adicional.

Cómo alojar fuentes de Google en Shopify

1. Usa Google Webfonts Helper para descargar los archivos WOFF2.
2. Sube los archivos de fuentes a la carpeta assets de tu tema.
3. Elimina la etiqueta de Google Fonts <link> de theme.liquid.
4. Añade declaraciones @font-face usando el filtro de Shopify que genera las URL de los archivos del tema.

<!-- In theme.liquid or base.css -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-regular.woff2" | asset_url }}') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-700.woff2" | asset_url }}') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
</style>

Esto elimina 2-3 solicitudes de red (DNS + CSS + redirección de fuente) y elimina un recurso de bloqueo de procesamiento. Combinadas con la precarga, las fuentes autohospedadas pueden cargarse entre 300 y 500 ms más rápido que las fuentes de Google. Para obtener más optimizaciones a nivel de CSS, consulte nuestra Guía de optimización de CSS de Shopify.

Fuentes variables: un archivo para todos los pesos

Las fuentes variables son un formato más nuevo que agrupa todos los pesos (y a veces anchos y estilos) en un solo archivo. En lugar de cargar archivos separados para regular, semi-negrita y negrita, un archivo de fuente variable se encarga de todo.

Las fuentes variables son especialmente valiosas cuando usas más de 3 pesos de la misma familia. Una única solicitud HTTP suele ser más rápida que descargar varios archivos más pequeños, especialmente en conexiones móviles con alta latencia.

@font-face {
  font-family: 'Inter';
  src: url('inter-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Supports all weights */
  font-style: normal;
  font-display: swap;
}

Las fuentes de Google más populares ahora ofrecen versiones de fuentes variables. Controlar fonts.google.com y filtro para compatibilidad con fuentes variables.

Reducir CLS con coincidencia de fuentes alternativa

Con font-display: swap, el navegador muestra primero el texto con una fuente alternativa del sistema y después con la fuente web. Si sus dimensiones difieren, el cambio modifica los saltos de línea y desplaza los elementos de la página, lo que perjudica la puntuación CLS.

Usa las propiedades CSS size-adjust, ascent-override y descent-override para que las dimensiones de la fuente alternativa coincidan lo mejor posible con las de la fuente web:

/* Create a size-adjusted fallback that matches Inter */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Use both in your font stack */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Herramientas como Generador de fuentes alternativas calculan los valores de anulación exactos para cualquier combinación de fuente web + alternativa. Esta técnica puede reducir el CLS de intercambio de fuentes de 0.05-0.15 a casi cero.

Reemplazar fuentes de iconos con SVG

Font Awesome, Material Icons y fuentes de íconos similares son uno de los peores infractores de la hinchazón de fuentes. Una fuente de íconos típica contiene más de 700 íconos de 150 a 300 KB, pero la mayoría de las tiendas usan solo entre 10 y 20 de ellos.

Reemplazar fuentes de íconos con SVG en línea:

• Ahorro de tamaño: 10 íconos SVG en línea = archivo de fuente de ícono de ~5 KB frente a 180 KB
• Sin bloqueo de renderizado: Los SVG se procesan inmediatamente con el HTML: no es necesario descargar fuentes
• Sin FOIT: Los iconos son visibles al pintar por primera vez, no después de cargar la fuente
• Mejor accesibilidad: Los SVG pueden incluir atributos aria-label.

La mayoría de los temas modernos de Shopify (Dawn, Sense, Craft) ya usan SVG en línea en lugar de fuentes de íconos. Si su tema aún carga una biblioteca de fuentes de íconos, cambiar a SVG es una de las optimizaciones de mayor impacto que puede realizar. Comprueba si tu tema se carga recursos de bloqueo de renderizado como archivos CSS de fuentes de iconos.

Lista de verificación de optimización de fuentes de Shopify

Revisa esta lista de verificación para optimizar completamente las fuentes en tu tienda Shopify:

Después de estos cambios, ejecuta otra prueba de velocidad para medir la mejora. Los resultados típicos son un LCP 200-800 ms más rápido y una reducción medible del CLS. En una estrategia completa de optimización de la velocidad de Shopify, las fuentes son un elemento más junto con las imágenes, los scripts de terceros y el CSS que bloquea el renderizado.

Preguntas frecuentes

Las fuentes son una ganancia rápida escondidas a plena vista

La optimización de fuentes de Shopify es una de las mejoras de rendimiento que más se pasan por alto. La mayoría de las tiendas cargan de 4 a 8 archivos de fuentes por un total de 200 a 400 KB cuando solo necesitan de 2 a 3 archivos de 30 a 60 KB. La naturaleza de bloqueo de renderizado de las fuentes significa que esto afecta directamente su puntaje LCP y la experiencia de carga visible para los clientes.

El enfoque manual funciona: agregar font-display: swap, subconjunto de WOFF2, autohospedaje y precarga. Pero si prefieres omitir los cambios de código, Thunder Page Speed Optimizer maneja la optimización de fuentes como parte de sus mejoras de velocidad automatizadas, junto con el aplazamiento de secuencias de comandos, CSS crítico y más.

Comienza midiendo tu posición. Realiza tu prueba de velocidad gratuita de Shopify y comprueba cómo las fuentes afectan tu rendimiento. Luego, siga la lista de verificación anterior o instale Thunder y deje que él se encargue del trabajo pesado. Para un enfoque integral, consulte nuestro las mejores aplicaciones de optimización de velocidad para 2026.