Qué son las webfonts y cómo usarlas en Tiendanube

Por: Nicolás Scalise

Hace no tantos años el mundo de internet en general y de las páginas que por uno u otro motivo utilizaban tecnologías web (HTML y CSS) en particular, nos limitaban al uso de apenas unas pocas tipografías de sistema. Esta poca flexibilidad hacía que los sitios se vieran aburridos y homogéneos, muy parecidos unos de otros. Fue por este motivo que los diseñadores y desarrolladores optaron por utilizar tecnologías no-web más flexibles como el Flash o bien haciendo un uso abusivo de imágenes, con el espíritu de brindar diferenciación y particularidad a sus sitios.

Con el tiempo, las tecnologías y los navegadores fueron evolucionando. Hoy en día gracias al uso de HTML5 y CSS3 podemos hacer todo tipo de experimentos tipográficos en nuestros sitios. Naturalmente, Tiendanube no es la excepción. Gracias a que nuestros diseños son totalmente flexibles, tenemos la posiblidad de agregar nuevas tipografías a las tiendas. En este post, vamos a explicar cuál es el mecanismo de implementación de una tipografía basándonos en dos enfoques diferentes.

¡Importante! En ambos métodos es necesario habilitar el FTP de las tiendas para poder realizar los cambios.

Método webfont de Google

Este método es el más sencillo y nos permite incluir en nuestra tienda cualquier tipografía de Google Fonts haciendo apenas algunas modificaciones al código.

Paso 1

Ir a Google Fonts y elegir la o las tipografías con las que se quiere trabajar.

Paso 2

Copiar el código de standard quick use y pegarlo en el head de layout.tpl. Por ejemplo, el código para incluir la Roboto sería:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Paso 3

Finalmente, utilizar la tipografía mediante CSS en donde prefieran de la siguiente manera:

font-family: 'Roboto', sans-serif;

Método webfont custom

Este método es un poco más complicado, pero nos ofrece la posibilidad de incluir casi cualquier tipografía. Muchas veces trabajamos con marcas que ya poseen una identidad basada en alguna fuente y en esos casos esta puede ser nuestra solución para que la tienda y su estilo estén alineados con esa identidad. Igualmente, es importante recordar que muchas veces las tipografías pensadas para ser impresas pueden no funcionar del todo bien cuando son convertidas a webfont, lo que hace que este método sea menos recomendable si las tipografías no fueron pensadas para su uso en pantallas.

Paso 1

Convertir la fuente a los tres formatos requeridos por los diferente navegadores: Woff, Eot y SVG. El servicio de fontsquirrel es muy bueno para esto pero no es el único.

Paso 2

Pegar las fuentes en el directorio /statics/fonts o similar.

Paso 3

Llamarlas desde la parte superior del CSS así cargan antes que los elementos.

@font-face{ 
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}