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

Gérer les paniers abandonnés | Astuce Prestashop 1.6
views 2528
Qu'est ce qu'un panier abandonné ?  L’abandon de panier,  c’est lorsque l’un de vos internautes ne finalise pas le processus de commande, après avoir...
Insérer pop-up dans une page CMS | Astuce Prestashop 1.6
views 2829
Un client désirait insérer un système de pop-up dans la page cms de Prestashop Je ne voulais pas installer un n-ième module pour faire simplement c...
Insérer un dropdown panier dans Prestashop 1.7
views 2762
Comme vous avez certainement pu le constater, pas mal de fonctionnalités ont disparus dans la version 1.7 de Prestashop. je trouve personnellement qu'...
Petit aperçu du thème Classic de prestashop 1.7
views 3959
Prestashop vient de sortir la version  1.7.0.0 RC0. A noter, par rapport à la version Prestashop 1.6, le thème a été totalement repensé afin d'être...
Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 1492
Il est vous peut-être arrivé de vouloir remettre votre produit en nouveauté Il existe deux solutions dont une donnée par Webbax Dupliquer votr...
Optimisez le sitemap de votre boutique | Astuce Prestashop 1.6
views 2070
Qu'est ce qu'un sitemap ?  Un sitemap est un fichier qui contient une liste enrichie d'URLs internes à un site web. Ce fichier est au format XML. Il ...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 728
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieu...
Ajouter des tabs dans une page cms | Astuce Prestashop 1.6
views 853
Ce tutorial va vous permettre d'insérer des tabs dans vos pages cms Astuce Prestashop 1.6 -------------------------------------- 1) Insérer une...
Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7
views 6172
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...
Comment créer un compte employé/profils/permissions dans PrestaShop 1.6 & 1.7
views 783
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...

Laisser un commentaire

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