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 visualización de fuente 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 HTML y encuentra un CSS regla @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 llama FOIT - Flash of Invisible Text. Te duele directamente Pintura con contenido más grande (LCP) Puntuación puntuación porque el elemento de texto más grande no se puede medir hasta que se carga la fuente. También puede causar Cambio de diseño acumulativo (CLS) cuando la fuente alternativa cambia a la fuente web y el texto vuelve a fluir.

¿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 la visualización de fuentes para detener el texto invisible

La optimización de fuentes más impactante es agregar visualización de fuente: intercambiar a tu @font-face declaraciones. Esto le dice al navegador: "Muestre el texto inmediatamente con una fuente del sistema, luego intercambie la fuente web cuando esté lista".

/* 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 visualización de fuentes

Dónde agregar visualización de fuentes en Shopify

En la mayoría de los temas de Shopify, las fuentes se declaran en el archivo CSS del tema o en el Diseño tema.liquido . A continuación se explica cómo encontrarlos y solucionarlos:

1. Ir a Tienda Online → Temas → Editar Código
2. Buscar @font-face en todos los archivos (marque base.css, tema.css, y tema.liquido)
3. Agregar visualización de fuente: intercambiar; a cada uno @font-face
4. Si usa Google Fonts a través de una URL, agregue &display=intercambiar 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 visualización de fuente: intercambiar, 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 a tu tema de Shopify activos

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 — If you only use 10 icons from Font Awesome (180KB), switch to inline SVGs instead.

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 is convenient, but self-hosting your fonts from Shopify's CDN is faster for two reasons:

1. Sin búsqueda de DNS adicional — Cargando desde fonts.googleapis.com La carpeta requires a DNS lookup + TLS connection to Google's servers. Self-hosting from your theme's activos utiliza el CDN de Shopify, al que tu navegador ya tiene conexión.
2. Sin CSS que bloquee el renderizado — Las fuentes de Google La etiqueta Etiquetas carga un archivo CSS que bloquea la renderización. Autohospedado Las declaraciones @font-face se pueden insertar directamente en el CSS de su tema, eliminando la solicitud adicional.

Cómo alojar fuentes de Google en Shopify

1. Uso Ayudante de fuentes web de Google para descargar archivos WOFF2
2. Sube archivos de fuentes a tu tema activos
3. Eliminar las fuentes de Google Etiquetas de tema.liquido
4. Agregar @font-face declaraciones usando el filtro de URL de activos de Shopify

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

Al usar visualización de fuente: intercambiar, el navegador primero muestra el texto en una fuente alternativa del sistema y luego cambia a su fuente web. Si las dos fuentes tienen diferentes tamaños, el intercambio hace que el texto se redistribuya, lo que cambia el diseño y perjudica el Puntuación CLS.

La solución: usar CSS ajuste de tamaño, anulación de ascenso, y anulación de descenso Las propiedades para que su fuente alternativa coincida lo más posible con las dimensiones 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 calculate the exact override values for any web font + fallback combination. This technique can reduce font-swap CLS from 0.05-0.15 down to near zero.

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 tener etiqueta-aria atributos

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 implementar estos cambios, ejecuta otra prueba de velocidad para medir la mejora. Resultados típicos: LCP 200-800 ms más rápido y una reducción mensurable en CLS. Para un enfoque completo de Optimización de la velocidad de Shopify, las fuentes son una pieza del rompecabezas junto con imágenes, scripts de terceros, y CSS de bloqueo de 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 visualización de fuente: intercambiar, 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.