Publica tu Proyecto ahora, es gratis! / ¿Que necesitas para lanzar tu negocio online?
Top

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.

ES-Online-Yellow-336x280

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.

Google fonts

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”>

web-fonts-using-google-3

 

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;
}

web-fonts-using-google-4

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.

Captura de pantalla 2016-08-24 a las 11.48.59

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.

Captura de pantalla 2016-08-24 a las 11.49.44

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.

Fuente

¿Necesitas ayuda?

¡Contrata ahora a un desarrollador freelance en LanceTalent!



Talento freelance para lanzar tu negocio online. LanceTalent es un "freelance marketplace” donde emprendedores, autónomos, startups y pymes ejecutan sus proyectos online con los mejores profesionales freelance.

Sin Comentarios

Publicar un Comentario