Detector de fuentes de Shopify: cómo encontrar las fuentes de una tienda

Qué puede mostrar un detector de fuentes de Shopify

Un detector de fuentes de Shopify no es un único botón. El método correcto depende de si administras la tienda, puedes abrir el editor del tema, puedes inspeccionar la página publicada o solo tienes una captura. Shopify puede usar fuentes de su biblioteca, fuentes del sistema, servicios externos o archivos incluidos en el tema, y cada origen deja una evidencia distinta.

Si gestionas la tienda, el editor del tema suele ser el punto de partida más fiable porque enseña los controles que gobiernan la tipografía. Puede haber una fuente para títulos y otra para el cuerpo, mientras que una sección concreta aplica una excepción. Anota siempre la familia y el peso.

Si estudias otra tienda, no tendrás acceso al panel de administración. Aun así, el HTML y el CSS publicados muestran la tipografía calculada, el tamaño, el peso, el interlineado y la pila de sustitución. Esta evidencia suele ser más exacta que comparar una imagen.

Un detector visual sirve cuando las letras están aplanadas en un logotipo, banner, fotografía de producto o publicación social. Ofrece candidatos parecidos, no una prueba de que la plantilla use esa familia. Compara formas, peso, espaciado y licencia antes de reutilizarla.

Revisar fuentes en el editor del tema de Shopify

El editor actual de Shopify coloca los controles globales de tipografía dentro de Ajustes del tema, aunque los nombres pueden variar según la plantilla. El ajuste suele afectar a toda la tienda, pero una sección o bloque puede introducir una regla más específica. Por eso es la mejor fuente para cambiar una tipografía, no solo para nombrarla.

Antes de modificar nada, abre la vista previa y apunta qué texto estás comprobando: navegación, títulos de producto, cuerpo, botones, avisos y pie pueden usar reglas distintas. Una tienda puede tener una familia para encabezados, otra para el cuerpo y otra para precios.

Prueba en un tema duplicado o en borrador. Cambiar la fuente puede modificar saltos de línea, altura de las tarjetas, envoltura del menú y el contenido visible al inicio. Comprueba también un teléfono estrecho.

El selector de fuentes marca además un límite de licencia. Si una familia no aparece en la biblioteca, revisa sus condiciones y el método de carga antes de copiar un archivo o una hoja remota.

1. En el administrador abre Tienda online y Temas. Busca el tema y pulsa Personalizar o Editar tema.
2. Abre Ajustes del tema y localiza Tipografía, Fuentes o un nombre equivalente.
3. Lee por separado las opciones de Títulos y Texto. Anota familia, estilo, peso y tamaño.
4. Abre una página de producto y una colección para comprobar si una sección tiene una excepción.
5. Previsualiza escritorio y móvil; guarda solo después de revisar saltos, botones, precios, navegación y alfabetos necesarios.

Inspeccionar una tienda Shopify publicada

Cuando no administras la tienda, la página pública sigue ofreciendo pruebas. Abre la URL exacta y espera a que carguen las fuentes. Un tema puede aplicar reglas diferentes a inicio, producto, blog y componentes de compra, por lo que conviene revisar la plantilla que te interesa.

Empieza por texto HTML real, como un título de producto o un enlace de navegación. Haz clic derecho y elige Inspeccionar. El panel Elementos debe seleccionar el nodo que contiene el texto, no una imagen.

En Estilos calculados busca font-family, font-size, font-weight y font-style. La primera familia es la preferida, pero el navegador puede usar una alternativa si faltan glifos o si falló la descarga. El panel Estilos ayuda a localizar el selector y la hoja que originó la regla.

Repite la comprobación en un título, un párrafo, un botón y un precio. Las plantillas de Shopify suelen separar esos papeles. Registra la relación entre cada rol y su familia en lugar de guardar un único nombre.

1. Abre la URL pública y espera a que termine la carga de texto y fuentes.
2. Inspecciona un encabezado o párrafo y confirma que sea un nodo de texto.
3. En Calculado busca font-family y copia toda la pila, incluidos los reemplazos genéricos.
4. Lee también peso, estilo, interlineado y tamaño para explicar diferencias visuales.
5. Si el navegador ofrece una vista Fonts, úsala para comprobar la cara que se dibuja para los glifos seleccionados.

Verificar la cara renderizada

Una declaración CSS es una petición, no una prueba de que todos los caracteres usen esa cara. Compara una letra distintiva, un número y cualquier carácter acentuado o no latino. Si hay sustitución, anótala por separado.

Tratar fuentes personalizadas y archivos

Un tema de Shopify puede incluir fuentes personalizadas además de la biblioteca de la plataforma. Una regla @font-face puede asignar un nombre cómodo a un archivo WOFF o WOFF2, por lo que el nombre de archivo no tiene por qué coincidir con la familia que ve el diseñador.

Si aparece una familia propia, filtra por Font en el panel Network para conocer la ruta de carga. La URL y el tipo de respuesta confirman si el archivo se descargó. Cada peso y estilo puede tener su propio origen.

El código del tema también importa. Un selector de fuente para el comerciante puede guardar un ajuste, mientras que los filtros Liquid font_face y font_modify generan CSS. Una regla escrita en base.css, theme.css o una hoja de sección puede sobrescribirla.

En una tienda propia usa el ajuste admitido siempre que sea posible. Si añades un archivo, conserva notas sobre licencia, formato, peso, estilo, cobertura Unicode y coste de rendimiento.

• Familia y archivo: Lee la familia declarada en @font-face y la familia del selector; pueden diferir de brand-bold.woff2.
• Peso y estilo: Comprueba 400, 500, 600, 700, cursiva y ejes variables. El falso negrita puede cambiar el resultado.
• Cobertura Unicode: Una familia puede cubrir latín y sustituir árabe, japonés, coreano o acentos.
• Carga y licencia: Usa un origen permitido y mide el coste. Ver una URL pública no concede derecho a copiar el archivo.

Elegir el método correcto para identificar la fuente

El método más rápido depende de la evidencia disponible. Usa esta tabla para decidir y confirma el resultado en el contexto de la tienda.

Un flujo fiable para detectar fuentes en Shopify

Un proceso repetible facilita explicar el resultado a un cliente. Empieza nombrando la evidencia: ajuste del tema, CSS vivo, archivo descargado o imagen. Después registra el rol y la página; así no llamas fuente del cuerpo a la de un banner promocional.

Confirma la decisión de dos formas cuando sea importante. En una tienda pública combina estilos calculados con la vista de fuentes o la solicitud de red. En tu tienda compara Ajustes del tema con una página de producto y otra de colección. La coincidencia entre origen y salida vale más que una etiqueta segura.

Por último decide si identificas, sustituyes o solo buscas un tono visual. Si la original no está disponible, compara candidatos con el mismo peso, tamaño, tracking y longitud de línea. Guarda la pila CSS y la sustitución para el siguiente responsable.

• 1. Nombrar la evidencia: Anota si procede de Ajustes, CSS calculado, un archivo o una coincidencia visual.
• 2. Mapear roles: Revisa títulos, cuerpo, navegación, botones, precios y tarjetas por separado.
• 3. Confirmar el render: Compara un carácter distintivo y una frase real; busca sustituciones.
• 4. Revisar producción: Comprueba idioma, licencia, carga, saltos responsivos y pesos disponibles.
• 5. Documentar: Guarda pila, selector o ajuste, rol, fecha y notas de sustitución.

Errores y límites habituales

Un detector reduce la búsqueda, pero no sustituye las comprobaciones de origen y producción.

• Mirar solo el inicio: Producto y blog pueden usar otra familia. Revisa la plantilla real.
• Tomar la primera familia como hecho: Glifos ausentes o descargas fallidas activan una alternativa. Comprueba un carácter.
• Confundir un logotipo con texto: PNG, SVG trazado o canvas no revelan la fuente original.
• Ignorar peso y espaciado: 400 y 700, o tracking distinto, pueden parecer tipografías diferentes.
• Copiar sin permiso: El CSS visible no concede una licencia de reutilización.
• No probar móvil: Una fuente de escritorio puede producir cortes y lentitud en pantallas pequeñas.