Le succès du EVO6 imposait un site dédié : Le voici !

Utiliser d’autres polices de caractères

Grace au addon google font pour evo6 on peut facillement utiliser touts la collection google web font pour personnaliser son template EVO6

Voici la démarche :

Voici tout d’abord un addon prestashop EVO6 intérréssant pour ceux qui souhaite facilement intégrer des police de caractère personnelle dans le design de leur template.

telechargement1

Téléchargez le module DDLX google font

Petite explication :

Quant on veux afficher une police de caractère spéciale dans son site prestashop il faut :

1) Déclarer la police de caractère :

Ce afin quelle soit chargé au chargement de la page.

2) L’utiliser sur les éléments qui nous intéresse.

Celà se fait avec du CSS (tips EVO6)

 

Que fait le module DDLX Google font ?

IL se charge de déclarer les police de caractère que vous souhaitez utiliser sur votre template EVO6.

Utilisation du module

1) Trouver la police de caractère :

Rendez vous sur le site : http://www.google.com/fonts et sélectionnez la police de caractère que vous souhaitez utiliser

Je veux par exemple utiliser celle ci : Tangerine

tangerine

Cliquez sur le lien « quick use » surligné sur l’image ci dessous :

google_font1

2) Copier /Coller le code fourni par Google font :

Exemple de code fourni par google font :

code_google

<link href=’http://fonts.googleapis.com/css?family=Tangerine:400,700′ rel=’stylesheet’ type=’text/css’>

 

googlefont2

Copier le code fourni par google font dans le champs du module ddlx google font réservé a cet effe, puis sauver. (Vous pouvez déclarer plusieurs font si vous le souhaitez ). Ca y est, vous venez de déclarer la / les polices de caractère, elles se chargeront au chargement de vos page web

 

3) Afficher la police de caractère sur les éléments souhaités :

Pour les novices qui ne s’y connaissent pas trop en CSS ; c’est un peu plus technique :

Tout d’abord il faut repérer dans le CSS la partie que nous souhaitons personnaliser : exemple le menu

Avec excellent outil firebug pour firefox, j’inspecte l’élément qui m’intéresse et je trouve le code CSS que je souhaite personnaliser.

firebug1

Dans le cas du menu :

‘ .sf-menu li a, .sf-menu li ‘ (Il sagit des liens du menu)

Je vais donc avec le EVO6 demander à ce que ce soit ma nouvelle police de caractère qui soit affichée,

Google nous fournis lui même le code CSS a utiliser pour évoquer la font déclaré :

css_google

On l’utilise pour afficher la font sur le menu : voici le code de base :

1
2
3
4
5
6
/* Font tangerine for menu + size 22px */

.sf-menu li a, .sf-menu li {
font-family: 'Tangerine', cursive;
font-size: 22px;
}

Note : ce code peut être personnalisé.

evo6_menu_tangerine

En d’autre terme on dit : Pour la partie menu,( .sfmenu) utilise la police de caractère TANGERINE (celle ci ayant été précédement déclaré dans le module ddlx google font)

Le résultat :

resultat_google_font

 

On peu faire appel a plusieurs fonts et les utiliser sur tout les élements du site, il faut juste injecter le bon code CSS dans le EVO6.

 

 

 

Posted in: Divers, Google font / police de caractère