Ajustes de fuentes

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de fuentes
2. Documentación de Company XYZ sobre los ajustes de fuentes
3. Documentación de Shopify sobre el editor de temas

Videos útiles

Vídeo de Shopify Academy: personalización de su tienda

Vídeo de Shopify Academy: personalización de su tienda

Estos ajustes controlan la tipografía utilizada en todo tu tema, desde el texto del cuerpo y los botones hasta los pies de foto, los títulos de las tarjetas y los niveles de encabezado. Como se aplican en muchos lugares a la vez, incluso un pequeño cambio de fuente puede afectar notablemente a la legibilidad, la jerarquía y la identidad de la marca.

Puedes usar las opciones de fuentes integradas para una configuración rápida o añadir fuentes personalizadas cuando necesites una identidad visual más específica. Para obtener información sobre la configuración, consulta la referencia de ajustes de fuentes y la documentación de Shopify sobre el editor de temas

Controles de fuentes principales

Los controles principales abarcan los estilos de texto que la mayoría de los clientes ve repetidamente en todo el tema.

1. Body font establece la fuente principal de lectura utilizada en todo el sitio, incluido el texto complementario, los subtítulos y las insignias de las tarjetas. Empieza por aquí, ya que tiene el mayor impacto en la comodidad y la claridad de lectura.
2. Button font se aplica al texto de las acciones en todo el tema. Una tipografía más marcada puede hacer que los botones parezcan más destacados, pero las fuentes decorativas pueden dificultar la lectura rápida de las etiquetas cortas.
3. Caption font se utiliza para textos pequeños con estilo de etiqueta, como el texto situado sobre los encabezados de sección. Es un buen lugar para introducir un acento tipográfico secundario sin interrumpir la lectura de textos más largos.
4. Text transforms para cada función te permiten controlar globalmente el uso de mayúsculas y minúsculas. Estos ajustes son útiles para definir el tono, pero también pueden hacer que el texto parezca más llamativo o denso.

Las transformaciones a mayúsculas y de ancho completo funcionan mejor en etiquetas y encabezados cortos. En el texto del cuerpo o en pies de foto pequeños, pueden reducir rápidamente la legibilidad.

Fuentes de encabezado

Este subgrupo te permite controlar por separado los títulos de las tarjetas y los niveles de encabezado H1 a H6. Úsalo para crear una jerarquía visual más clara en las páginas, las tarjetas y el contenido estructurado.

1. Card heading font afecta a los títulos de contenido repetido, como las tarjetas y las vistas previas. Elige una fuente que siga siendo legible en tamaños pequeños y diseños más compactos.
2. H1 font suele ser el estilo de encabezado más destacado y se utiliza a menudo para los títulos de página y las áreas de titulares principales. Debe resultar distintivo sin desentonar con el resto de tu tipografía.
3. H2 to H6 fonts ayudan a definir los subtítulos y la estructura del contenido. En la mayoría de los casos, mantener estos niveles relacionados visualmente produce un resultado más limpio que hacer que cada nivel sea completamente distinto.
4. Heading text transforms pueden añadir énfasis, especialmente en títulos cortos de tarjetas o encabezados de estilo destacado. Si demasiados niveles de encabezado utilizan transformaciones agresivas, las páginas pueden empezar a verse visualmente recargadas.

Consejo

Una combinación sencilla suele funcionar mejor: una fuente de cuerpo legible, una fuente de encabezado con contraste y un uso mínimo de las transformaciones de texto.

Fuentes personalizadas

Si las opciones integradas no coinciden con tu marca, puedes añadir fuentes de un proveedor o utilizar archivos de fuentes alojados por ti. Esto te ofrece más flexibilidad, pero también hace que la precisión sea más importante.

1. Provider-based fonts te permiten cargar una tipografía desde un servicio de fuentes mediante el código proporcionado.
2. Hosted fonts te permiten utilizar tus propios archivos .woff o .woff2. Proporcionar ambos formatos puede mejorar la compatibilidad.
3. Hosted font naming es importante porque las asignaciones de fuentes personalizadas posteriores de este grupo dependen del nombre exacto de la familia que definas.

Para consultar los métodos de fuentes personalizadas compatibles y obtener información sobre la configuración, visita fuentes personalizadas.

Utiliza únicamente fuentes con las licencias adecuadas y verifica cuidadosamente cualquier código del proveedor o las URL de los archivos alojados. Si una fuente personalizada no se carga correctamente, el tema puede utilizar otra fuente como alternativa y crear una tipografía incoherente.

Asignaciones de fuentes personalizadas

Después de añadir una fuente personalizada, puedes asignarla a funciones tipográficas específicas en todo el tema. Hay controles personalizados independientes para el texto del cuerpo, los botones, los pies de foto, los encabezados de tarjetas y cada nivel de encabezado.

1. Font family debe coincidir con el valor exacto proporcionado por tu fuente. Esto es lo que conecta la fuente cargada con la función que quieres diseñar.
2. Font weight debe coincidir con la versión prevista de la tipografía. Si el peso no es correcto, la fuente puede parecer más fina, más gruesa o menos refinada de lo esperado.
3. Font style te permite usar un estilo normal o cursiva cuando corresponda. La cursiva puede aportar personalidad, pero normalmente es mejor reservarla para usos más grandes o intencionados.
4. Per-role custom settings facilitan el uso selectivo de una tipografía personalizada, por ejemplo, solo para los encabezados H1 o los botones, en lugar de sustituir todas las fuentes del tema.

Un enfoque práctico consiste en añadir primero una fuente personalizada, probarla en su función más importante y ampliar su uso solo si mantiene el equilibrio en diferentes plantillas y tamaños de texto.

Notas de uso

1. Empieza por el texto de lectura. Configura primero la fuente del cuerpo, ya que afecta a la mayor cantidad de contenido y establece el tono general del tema.
2. Crea la jerarquía de forma deliberada. Utiliza las fuentes de encabezado y el estilo de los títulos de las tarjetas para separar claramente los niveles de contenido sin hacer que todas las funciones de texto compitan por la atención.
3. Limita las transformaciones de mayúsculas y minúsculas. Aplica principalmente mayúsculas, cambios a minúsculas o estilos de ancho completo a textos cortos en los que el tratamiento visual siga siendo fácil de leer.
4. Prueba el contenido repetido. Comprueba las fuentes en tarjetas, botones, pies de foto y títulos de página para detectar problemas de espaciado o legibilidad en los lugares que los clientes ven con más frecuencia.
5. Verifica la configuración de las fuentes personalizadas. Confirma cuidadosamente los valores de font-family, el código de origen y las URL de los archivos alojados para mantener una tipografía coherente en todo el tema.
6. Comprueba el texto de formularios y acciones en su contexto. Asegúrate de que los botones, las etiquetas y los mensajes de validación sigan siendo legibles en estados vacíos, enviados y de error.
7. Revisa las plantillas con mucho contenido. Compara la tipografía en los diseños de productos, carrito, búsqueda, blog y artículos para que los encabezados y el texto del cuerpo sigan estando equilibrados cuando cambie el contenido o haya pocos resultados.