Portada PrestaShop Tutoriales ¿Cómo usar Google Fonts en Prestashop?
Google Fonts es un servicio de Google que permite a desarrolladores web y diseñadores gráficos utilizar un amplio banco de tipografías de manera gratuita para sus proyectos. La ventaja de utilizar estas tipografías en entornos web radica en que hoy en día en la inmensa mayoría de navegadores modernos se pueden interpretar de manera fidedigna cualquiera de los textos publicaos en Internet que hayan utilizado este tipo de fuentes. Todo ello sin que los usuarios visitantes de la página tengan que tener previamente instalada esa fuente en sus equipos.
Navegando con Google Chrome, Mozilla Firefox, Safari, Opera y las últimas verisones de Internet Explorer vamos a poder leer de manera correcta y manteniendo la composición cualquier texto que utilice las fuentes de Google Fonts, lo cual es un recurso que multiplica las posibilidades estéticas para alguien que esté creando una web.
Si tenemos una tienda online en Prestashop sabremos de la importancia del uso de imágenes de calidad y buenos textos para acompañar a nuestros productos, y la importante que resulta un diseño adecuado y armonioso tanto para convencer al cliente de que compre nuestros productos. Utilizando Google Fonts en Prestashop vamos a poder diferenciarnos de la competencia mejorando nuestros títulos y llamadas a la acción y haciendo que simplemente con algo tan sencillo como cambiar la tipografía de nuestra web podamos mejorar nuestras resultados y conversiones.
En primer lugar debemos acudir al sitio web oficial de Google Fonts para elegir la tipografía que nos parezca más correcta para el uso que le vamos a dar. tenemos multitud de tipos de letra, así en un primer momento seguro que nos lleva un buen rato qeudarnos con la fuente más deseada. Por ejemplo, podemos buscar un tipo de letra dentro de la categoría Serif (con serifas) y dentro del grosor subiremos la barra de nivel para conseguir una fuente con un aspecto más pesado.
En este caso hemos elegido la tipografía Alegreya.
Para poder usarla nos qeudaremos que se genera pinchando en la tipografía y que nos sugiere lo siguiente:
Código para añadir en el sitio web:
<link href=’https://fonts.googleapis.com/css?family=Alegreya’ rel=’stylesheet’ type=’text/css’>
Código para añadir en la hoja de estilos CSS:
font-family: ‘Alegreya’, serif;
En nuestro Prestashop tendremos que editar el archivo del diseño o theme que estemos utilizando, siempre realizando antes una copia de seguridad para evitar que haya problemas si nos equivocamos. Concretamente tendremos que buscar el archivo header.tpl dentro de nuestra carpeta del tema instalado.
/themes/…/header.tpl
En ese archivo buscaremos la siguiente línea de código:
{$HOOK_HEADER}
Y justo debajo añadiremos la línea anteriormente empleada como ejemplo:
El segundo paso a realizar es añadir el código del CSS que define en la hoja de estilos las fuentes empleadas, podemos buscar líneas que contengan la orden font-family, que se refiere a la fuente empleada en ese titular, enlace o elemento.
Por ejemplo nos podemos encontrar con una línea de este tipo que hace que determinado titular con la etiqueta h2 utilice una fuente eleginda, en concreto Arial y en su defecto la fuente serif:
#main h2{font-family: Arial, serif;};
En nuestro caso deberemos susitituir un tipo de letra por otro, como indica el ejemplo siguiente:
#main h2{font-family: ‘Alegreya’, serif;};
Si guardamos los cambios realizados y actualizamos nuestro sitio web veremos al momento la nueva tipografía y su resultado en nuestra tienda Prestashop.