Como utilizar la tipografía en tu Tienda Online Shopify
La correcta elección de la tipografía puede ayudarte a darle carácter y estilo a tu tienda online Shopify al tiempo que se refuerza la imagen de tu marca.
En las webs más primitivas, los diseñadores y desarrolladores web se veían limitados por la cantidad de fuentes que podían utilizar para mostrar el texto. Esto se debía a que la fuente solo se podía ver en la página web si el visitante la tenía instalada en su propio ordenador. De aquella había muy pocas fuentes instaladas en todo el mundo, por lo que las opciones eran escasas, pero incluso entonces los diseñadores y desarrolladores contaban con una hoja de estilo para utilizar las tipografías de manera correcta y asegurarse así de que todo el diseño era coherente.
Afortunadamente los tiempos han cambiado, y con la ayuda de algunos recursos y servicios online podemos utilizar una cantidad aparentemente ilimitada de fuentes para mostrar el contenido de una forma creativa.
En este artículo, vamos a ver cómo puedes incluir algunas de las mejores tipografías en tu tienda online Shopify.
Google Fonts
Una de las maneras más fáciles de añadir fuentes web en tu tienda Shopify es utilizar las que proporciona Google Fonts. Además de hacer mejoras en su selección, Google Fonts ha lanzado recientemente un nuevo diseño para mostrar las fuentes web que tiene en su biblioteca. Aquí tendrás cientos de fuentes para elegir, con el valor añadido de que sabrás si esa fuente que has elegido ralentizará la velocidad de tu web o no.
Una vez que has seleccionado las fuentes que quieres utilizar, tienes que copiar el fragmento de código y pegarlo en tus archivos HTML o stylesheet.
HTML
<link rel="nofollow" target="_blank" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One" rel="stylesheet">
@IMPORT
<style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One';
</style>
A continuación, tienes que hacer referencia a esas fuentes en el CSS, con el fragmento de código proporcionado por Google Fonts.
CSS
font-family: 'Suez One', serif;
font-family: 'Open Sans', sans-serif;
Si tienes algún problema o duda al utilizar Google Fonts puedes consultar su guía.
En tu tienda online Shopify, debes hacer referencia a los tipos de letra que quieres incluir, utilizando el método HTML y añadiendo la siguiente línea de código en tu archivo theme.liquid:
<link rel=”nofollow” target=”_blank” href=”https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One” rel=”stylesheet”>
Tendrás que añadir tu fragmento de código en el archivo theme.liquid porque el fragmento de Google Fonts necesita ser referido en cada página de tu tienda online Shopify. Por ejemplo, si sólo añades el fragmento de código a tu archivo product.liquid, las fuentes web sólo serán visibles en tu página de producto.
Alternativamente, puedes utilizar una hoja de estilo en los archivos del tema de tu tienda Shopify para hacer referencia a las fuentes que te gustaría utilizar. Al igual que el archivo theme.liquid, hay que asegurarse de que el fragmento de código que usas está en cada página de tu sitio web, con el fin de poder mostrar las fuentes que has elegido en cada página.
En este caso de ejemplo, el estilo del tema de Shopify está en el archivo theme.css. Vamos a añadir el siguiente fragmento de código al archivo theme.css para empezar a utilizar las fuentes web que hemos seleccionado de Google Fonts.
@import ‘https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One’;
body {
font-family: ‘Open Sans’, sans-serif;
}
h1 {
font-family: ‘Suez One’, serif;
}
Combinaciones de tipografías
Existen múltiples estilos de fuentes tipográficas que pueden combinar muy bien entre sí. Si quieres incluir más de una fuente en tu tienda online Shopify no dejes de consultar estas páginas: :
Font Pair
Font pair tiene un sistema de filtrado para los diferentes tipos de estilo disponibles en Google Fonts, como sans-serif / serif, cursiva / sans-serif, etc.
The Google Font Project
Si deseas ver como se utilizan las Fuentes de Google de manera correcta e inspirarte un poco, esta es tu web.
Subir fuentes personalizadas a tu tienda online Shopify
Si deseas utilizar una fuente personalizada que un diseñador a hecho para tu marca, o has comprado una tipografía por ejemplo desde Font Squirrel, estos son los pasos que debes seguir.
Deberás crear una nueva hoja de estilo en tu carpeta de activos, y llamarla webfonts.css. Ahora, deberás referir tu nueva hoja de estilo en tu archivo theme.liquid:
{{ “webfonts.css” | asset_url | stylesheet_tag }}
Ahora, puedes hacer referencia a tu nueva fuente en las otras hojas de estilo de la siguiente manera:
h1 {
font-family: ‘bebasregular’;
}
Y ya estaría listo 🙂
Cómo hemos dicho al principio del post, las diferentes fuentes tipográficas tienen el poder de darle un carácter u otro a una marca. No tengas miedo de innovar y de hacer diferentes pruebas hasta encontrar la tipografía que mejor se identifica con tu negocio.
¿Necesitas ayuda?
¡Contrata ahora a un desarrollador freelance en LanceTalent!
