Utilizar fuentes de Google Font en Prestashop

Es posible, que llegado un momento nos interesa utilizar unas fuentes en los textos de nuestra tienda Prestashop, diferente a las habituales.

En este caso, vamos a trabajar con Google Font, lo primero que vamos hacer es meternos en la siguiente web:

http://www.google.com/webfonts/

Vamos hacer uso de la siguiente fuente:

La fuente, que vamos a usar se llama: “Dawning of a New Day“.  (En este caso, hemos señalado tal fuente, pulsando en: Add to Colecttion)

Ahora vamos hacer decirle a Google Font, que queremos usar esta fuente, para ello debemos pulsar en la misma página, en el siguiente botón:

(Hemos pulsado el botón “Use”, que está en la misma página donde hemos seleccionado la fuente o fuentes que vamos a usar)

Y ahora en este caso nos lleva a la siguiente pantalla:

(Pulsar en la imagen, para verla de forma completa)

(Pulsar en la imagen, para verla de forma completa)

Principalmente no están dando la instrucción que tenemos que insertar en el head de nuestra plantilla de nuestra tienda prestashop, y un ejemplo de uso.

En nuestra tienda prestashop (recordamos, que vamos a trabajar con la plantilla por defecto), vamos a editar el fichero:

/themes/prestashop/header.tpl

Buscamos la siguiente línea:

{$HOOK_HEADER}

Y justo debajo añadimos lo siguiente:

<link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'>

Ahora ya podemos hacer uso de la nueva fuente….

En este caso vamos hacer un pequeño ejemplo, vamos a cambiar la tipografía del título del bloque de categorías en nuestra tienda prestashop:

Por defecto se ve así:

Y vamos hacer que se vea de la siguiente manera:

(Se ve que no estamos usando una fuente muy apropiada….. pero bueno es un ejemplo de uso)

Simplemente como ya hemos insertado la instrucción anterior en el fichero header.tpl, ya podemos hacer uso de tal fuente, para ello en este caso vamos a editar el siguiente fichero:

/themes/prestashop/css/modules/blockcategories/blockcategories.css

Y hemos añadido lo siguiente:

 

#categories_block_left h4 {
font-family: 'Dawning of a New Day', cursive;
}

En resumen, en este ejemplo hemos realizado lo siguiente:

1) Hemos accedido a la web de Google Fonts.

2) Hemos elegido una fuente.

3) Hemos copiado el código que nos ha sugerido Google Fonts, para colocarlo en el head de nuestra plantilla en nuestra tienda prestashop.

4) Hemos usado la fuente que hemos seleccionado, en el título del bloque categorías en nuestra tienda Prestashop.

Un comentario sobre “Utilizar fuentes de Google Font en Prestashop”

  1. Caballero, muchas gracias por este post y por todo lo que aportas al foro de prestashop
    Abrazo

Los comentarios están cerrados.