6 février 2016 jef

Comment installer une police webfont dans Prestashop

Prestashop – Installer une police webfont

Les polices de caractères proposées par le template installé par défaut sur Prestashop ne sont pas très séduisantes, vous en conviendrez !

Alors pourquoi ne pas se lancer dans la personnalisation de son thème pour y installer une police webfont proposée sur Google Font ou FontSquirrel ?

Savez vous comment installer une webfont dans Prestashop 1.6 ?

C’est ce que je vais vous apprendre dans ce tuto.

Intéressons nous aujourd’hui à la gestion des polices dans le CMS Prestashop. Ce CMS spécialisé E-commerce très efficace pour les utilisateurs finaux peut sembler un peu compliqué lorsqu’il s’agit de personnaliser son interface.

1ère étape trouver sa police de caractères

Pour trouver une webfont, nous pouvons nous rendre sur le web, nous pouvons utiliser Google Font ou Fontsquirrel. Ces deux outils nous permettent de préparer le ‘pack de polices’ dont nous avons besoin.

Fontsquirrel à l’avantage de vous permettre de créer un pack de police pour le web à partir d’une police de caractères située sur votre disque dur. (bien entendu, l’utilisation de cette police dépend de sa licence et de ses droits d’utilisation)

Pour cet exemple, nous commencerons par utiliser Fontsquirrel

Rendez-vous sur http://www.fontsquirrel.com/

ecran du site fontsquirrel

Les polices webfont sur fontsquirrel

 

Pour choisir une police

Fontsquirrel propose un menu sur la droite pour vous guider dans le choix de votre police.

Je choisi une police script Alex Brush et je clique sur le lien Download TTF

polices-fontsquirrel

Bouton dowload OTF sous la police choisie

2ème étape Dézipper le dossier téléchargé

Le dossier est téléchargé dans mon dossier de téléchargements sur mon disque-dur, il faut le dézipper.

dossier-dezipper

Pensez à dézipper votre dossier téléchargé

3ème étape Générer les webfonts

Rendez-vous sur l’onglet Generator de Fontsquirrel

Cliquer sur Upload Fonts

page generator de fontsquirrel

le webfont generator

Choisir dans le dossier dézippé la font avec l’extension .ttf

contenu-du-dossier

font ttf

Le site charge la police et nous demande de choisir l’option de traitement du fichier.
Le choix Optimal fonctionne très bien

N’oubliez pas que l’utilisation des polices est soumise à des droits.
Cocher la case Agreement .

ecran de validation de la font

accord légal d’utilisation de la police

Cochez puis cliquez sur : « Dowload your kit »

Le kit s’enregistre, c’est un dossier zippé, vous le retrouverez dans votre dossier téléchargement

4ème étape que trouves t’on dans ce dossier ?

Fontsquirrel nous a préparé des polices et un exemple de code css pour l’insertion dans notre feuille de styles de thème.

Le dossier téléchargé est un zip ; ouvrons le !

les différentes polices à intaller

le contenu du kit de webfont

Les fichiers avec les extensions : EOT, SVG, TTF, WOFF, WOFF2 permettent de lire la police sur les différents navigateurs. Nous allons les placer dans notre thème prestashop. Nous ouvrirons ensuite stylesheet.css qui est l’exemple du code à utiliser dans notre feuille de style. Le fichier txt peut servir pour un import en base de données. Le fichier html est le mode d’emploi du kit de police.

5ème étape préparation de l’Insertion dans Prestashop

Il nous faut regrouper les polices dans le dossier fonts de notre thème

Je vais les déposer à l’aide du logiciel de transfert FTP filezilla

Par Filezilla, je me rends sur mon site distant , je navigue dans mes répertoires jusqu’au thème

Et je parcours les dossiers de mon thème pour y trouver le dossier fonts. Si celui-ci n’existe pas, je peux le créer.

vue filezilla d'un theme prestashop

architecture des dossiers d’installation du thème Prestashop 1.6

dossier fonts dans un theme Prestashop1.6

Le dossier fonts dans le theme

 

 

transfert des polices dans le thème

transfert des différentes webfont vers le dossier fonts du thème

Je transfert vers le dossier Fonts de mon thème les 5 polices de mon kit alexbrush.

6ème étape Travail sur la feuille de style

C’est maintenant dans la feuille de styles que tout va se jouer.

Regardons en premier le contenu de l’exemple téléchargé dans le kit

le code proposé par le kit

règle @fontface

Ce sont ces lignes de code que nous allons reporter dans la feuille de style de notre thème.

Qu’est ce qu ‘elles racontent ?

La régle @fontface est une déclaration de polices. Le sélecteur font-family nomme la police, c’est ce nom que l’on utilisera dans nos régles de propriétés dans la feuille de style ; Ensuite le sélecteur src donne l’accès à l’url du dossier où sont rangées les fonts Font-weight et font-style sont des propriétés qui déclarent la forme de la police (ici normal)

Sur l’installation de Prestashop, la feuille de style du thème par défaut (bootstrap) est la global.css

Elle se trouve dans le dossier CSS du thème

global-css

Je vais l’éditer avec FileZilla et mon éditeur de code (notepad++ ou brackets)

En effectuant une recherche dans la feuille de style global.css, je trouve qu’il existe déjà une régle @fontface à la ligne 3892.

Je vais donc ajouter vers la ligne 3906 ma seconde régle CSS pour cette feuille de style.

code feuille css

la feuille de style global.css avec l’ajout du code @fontface

7ème étape Donner les bons chemins d’accès

Il me reste à modifier mes chemins d’accès vers les polices.

Rappelez vous à l’étape 5 j’ai uploader les polices webfont vers le dossier fonts de mon thème.

Je dois donc dire dans la règle @fontface que mes polices sont stockées dans ce dossier.

 

Cette déclaration de chemin se fait sur les ligne src 3911 à 3916 de mon exemple

Ce qui donne si mes polices sont dans le dossier ‘fonts’ de mon thème :

modification du code

le code css modifié avec le lien vers la source

8ème et dernière étape Préciser où utiliser cette police

Notre travail est presque terminé.

Maintenant il nous reste à placer une règle utilisant la propriété suivante :

font-family: ‘alex_brushregular’, Arial, sans-serif;

par exemple pour les paragraphe :

p { font-family: ‘alex_brushregular’, Arial, sans-serif; }

dans notre feuille de style, je vais modifier les selecteurs h1 à h6 ;

ils sont normalement définis vers les lignes 355 de votre feuille de styles global.css

selecteurs-h

il me suffit de repérer la propriété font-family et venir copier le nom de ma webfont à la place de Arial, ce qui donne

propriete-font-family-h1a-h6

 

N’oublions pas de sauvegarder la feuille de style et d’effectuer le transfert avec Filezilla vers notre hébergement

Le résultat, notre police est modifiée !

Police modifiée sur le slider en page d'accueil; utilisation du sélecteur h3

Police modifiée sur le slider en page d’accueil; utilisation du sélecteur h3

Avec un peu d’astuce et de réflexion, vous parviendrez facilement à modifier toutes les polices de votre thème, il vous suffit d’utiliser les inspecteurs de codes sur vos navigateurs !

inspecter son code sur firefox ou chrome

inspecter son code sur firefox ou chrome

Cette astuce est expliquée dans le pdf lié à cet article, n’hésitez pas  !

Télécharger le tuto : Prestashop – insérer une police webfont

Besoin d’aide pour l’adaptation de votre thème ?

Contactez-moi

www.pdf24.org    Envoyer l'article en PDF   
Tagged: , , ,

Comments (2)

  1. vanessa

    Bonjour,
    je teste votre tuto tout va bien, sauf que lorsque je tente d’insérer le code dans global.css toute la police fontawesome disparait lorsque je suis sous mozilla
    de quoi cela peut-il venir?
    merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.