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

Afficher les fournisseurs sur les pages produits | Astuce Prestashop 1.6
views 1611
Ce tuto va vous expliquer comment insérer les fournisseurs dans la page produit dans la version Prestashop 1.6 A) Mettre le nom du fournisseur av...
Ajouter des tabs dans une page cms | Astuce Prestashop 1.6
views 929
Ce tutorial va vous permettre d'insérer des tabs dans vos pages cms Astuce Prestashop 1.6 -------------------------------------- 1) Insérer une...
Comment dupliquer un thème Prestashop 1.6 ?
views 1984
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...
Désactiver les deux zooms de la page produit | Astuce Prestashop 1.6
views 2489
Ce tuto simple et rapide va vous permettre de désactiver les deux zooms de la page produit. Cette astuce est valable Prestashop 1.6. Le code étant ...
Créer un thème enfant avec PrestaShop 1.7
views 438
Qu’est ce qu’un thème enfant ? Un thème Prestashop est un ensemble de fichiers qui permet de gérer les fonctionnalités et le visuel d ‘un site Prest...
Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 1630
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...
Ajouter les réseaux sociaux sur la page d’accueil | Prestashop 1.7
views 3646
Contrairement à Prestashop 1.6, les réseaux sociaux sur votre page d'accueil ne s'affichent pas automatiquement. Ce petit tutorial va vous permettr...
Où Changer le nom de sa boutique | Astuce Prestashop 1.6
views 1987
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...
Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6
views 2052
Grâce à ce tuto, vous allez pouvoir supprimer le nom de votre boutique de la balise Meta Title de vos pages sur votre site e-commerce Astuce Presta...
Braintree – Une solution de Paiement sans VAD | Prestashop
views 4662
Qu'est-ce que Braintree ?  Braintree offre une solution complète de paiement pour les e-marchands sur mobile, tablette et bureau. C'est une entrepris...

Laisser un commentaire

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