Modifier la police d’écriture avec Google Fonts – PrestaShop 1.7

Dans ce tuto nous allons voir comment modifier la police d’écriture avec Google Fonts pour votre site PrestaShop 1.7

A noter: actuellement la police par défaut est Noto Sans, sans-serif

Etape 1) Choisir sa police d’écriture 

Nous allons choisir notre/nos police(s) d’écriture sur le site de Google Fonts à cette adresse : https://fonts.google.com/

Je vais choisir deux polices d’écriture, 1 pour les paragraphes et une autre pour les titres

Dans cette exemple, on va opter pour Open Sans pour les paragraphes et Fjalla One pour les titres

A) Je recherche ma police d’écriture, pour les paragraphes je sais d’avance  ce que je vais prendre je vais donc la chercher directement via le moteur de recherche puis cliquez sur l’icone +

B) Pour les titres, je vais faire une recherche via un mot pour voir le rendu. Une fois trouvé  je clique sur l’icone + de la police que je souhaite

C)  Maintenant que nous avons nos deux polices d’écriture, nous allons cliqué sur l’onglet en bas qui est apparu lors de mon 1er ajout

D)  Nous allons avoir besoin des codes des deux blocs “embed font” et “specify  in css”.

Etape 2) Les intégrer dans PrestaShop

A) On va intégrer dans un 1er temps le code qui se situe dans embed font. Pour cela il faut ouvrir le fichier head.tpl qui se situe dans  themes/nomdevotretheme/templates/_partials/head.tpl et coller le code que propose Google font

B) On va maintenant ouvrir le fichier custom.css qui se situe dans /themes/nomdevotretheme/assets/custom.css et insérez le code suivant (cf google fonts)

 

ET VOILA LE RÉSULTAT

 

Articles similaires

Installer manuellement un module PrestaShop
views 2292
Voici un petit tuto pour vous permettre d'installer manuellement votre module PrestaShop Pour ce tuto, nous allons partir du fait que vous avez ach...
Comment paramétrer la devise dans Prestashop 1.6 & 1.7
views 5293
Par rapport à Prestashop 1.6, la création d’une devise dans Prestashop 1.7 a été grandement simplifiée. Par exemple les champs: code ISO et  ISO code ...
Les modules installés par défaut sur le front-office de votre boutique | Prestashop 1.7
views 2663
La version Prestashop 1.7 officielle est sortie. La liste des modules installée par défaut sur votre boutique a considérablement diminué puisqu'il y a...
Comment dupliquer un thème Prestashop 1.6 ?
views 2188
Vous désirez apporter des modifications dans les fichiers TPL, CSS... du thème par défaut de Prestashop. Je vous conseille fortement de le dupliquer e...
Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7
views 7935
Aujourd’hui, nous allons voir comment configurer le diaporama de votre page d'accueil sur votre boutique en ligne sur Prestashop 1.6 &Prestashop 1...
POSITION : inverser le hook displayHome et DisplayHomeTab | Astuce Prestashop 1.6
views 1749
Ce tuto va vous permettre d'inverser le hook displayHome et hookDisplayHomeTab, situé sur la page d'accueil de Prestashop A la base voici comment s...
Comment faire apparaitre une deuxième photo de vos produits au survol des images
views 3175
Voici un petit tutoriel qui va vous permettre de faire apparaitre la deuxième image de votre produit au passage de la souris. UPDATE : j'ai trouvé ...
Supprimer le contenu par défaut de votre boutique | Astuce Prestashop 1.6
views 3745
Lorsque vous installez Prestashop pour la 1er fois, du contenu par défaut est installé : faux clients, faux produits, fausses commandes.... Si vous...
Gratuit : template facture et bon de livraison | Astuce Prestashop 1.6
views 19646
On ne va pas se le cacher, la mise en page des pdf des factures et bons de livraison, n'est vraiment pas top. Je vous propose donc une nouvelle mis...
Afficher les sous-catégories sur la page catégorie | Prestashop 1.7
views 6212
Vous l'avez peut-être constaté mais sur la version Prestashop 1.7, les sous-catégories ne s'affichent pas sur les pages catégories comme sur Prestasho...

Laisser un commentaire

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