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

Désactiver le bouton Comparer | Astuce Prestashop 1.6
views 1509
On me demande très souvent comment on désactive la partie « comparer » dans le back office de Prestashop. C'est très simple : Allez dans le...
Où Changer le nom de sa boutique | Astuce Prestashop 1.6
views 1888
Si vous désirez modifier le nom de votre boutique sur le cms Prestashop, suivez ce petit tuto Comment modifier le nom de sa boutique depuis le back...
Comment créer un compte employé/profils/permissions dans PrestaShop 1.6 & 1.7
views 1067
La page d'administration "Employés" permet de créer des comptes afin de se connecter au back-office de PrestaShop. La connexion aux back-office se fai...
POSITION : inverser le hook displayHome et DisplayHomeTab | Astuce Prestashop 1.6
views 1491
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...
Mettre sa boutique en maintenance et accéder à sa boutique  | Prestashop 1.6 et 1.7
views 2361
Lorsque vous désirez effectuer de grands changements sur votre boutique, je vous conseille de mettre votre boutique en maintenance c'est à dire de sig...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 1
views 2990
La version R.C.0.1 de Prestasho 1.7 est sortie, et grande surprise son back-office a été traduit en français (enfin une grande partie) Par rapport ...
Page blanche bon de livraison | Astuce Prestashop 1.6
views 1212
Lorsque vous désirez télécharger le bon de livraison depuis le back-office de prestashop, vous avez le droit à une jolie page blanche. Ce bug se tr...
Désactiver “Recevez les offres spéciales de nos partenaires” | Astuce Prestas...
views 1347
Cette phrase  "Recevez les offres spéciales de nos partenaires"  apparait lors de la création d'un compte comme vous pouvez le voir sur la photo ci-de...
3 produits achetés le 2ème gratuit | Astuce Prestashop
views 2317
Vous désirez mettre en place une campagne de promotion : x produits achetés, 1 offert. Il est très facile de configurer ce cas de figure dans Prest...
Modifier l’arrière-plan de votre boutique Prestashop 1.7
views 4824
Dans ce tutorial, nous allons voir comment modifier les couleurs de fond de votre boutique en ligne Prestashop 1.7. Tout se passe à l'intérieur des co...

Laisser un commentaire

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