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 1603
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...
A/B Testing – Quick Vs Multi Page checkout – Which performs better?
views 497
Checkout pages are the last part of transaction that confirms sale. They ask customer about their personal information (name, CNIC, credit card info, ...
Mettre une page catégorie comme page d’accueil | Astuce Prestashop 1.6
views 1365
Ce petit tuto va vous permettre de transformer votre page catégorie en page d'accueil. Cette petite astuce Prestashop est valable pour la version  ...
Quels sont les modules utilisés sur la page d’accueil ? | Prestashop 1.7
views 13622
Par rapport à Prestashop 1.6, la page d'accueil a totalement été relooké et le nom et le hook des modules ont été modifiés. Voici une check-list de...
Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 1711
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...
POSITION : inverser le hook displayHome et DisplayHomeTab | Astuce Prestashop 1.6
views 1628
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...
Vider le cache dans Prestashop 1.6 et Prestashop 1.7
views 21005
Pourquoi vide t-on le cache dans Prestashop ?  Lorsque vous modifiez des codes dans prestashop pour améliorer par exemple le thème graphique, il se p...
Optimisez le sitemap de votre boutique | Astuce Prestashop 1.6
views 2299
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 ...
Lenteur Enregistrement Produit BO 1.6.0.11
views 1676
Vous avez téléchargé la version Prestashop 1.6.011 et là grand problème lorsqu'on accède à la fiche produit on s'aperçoit que les boutons "enregistrer...
Améliorer les performances de votre boutique Prestashop 1.6
views 4380
A) Connaitre les performances de sa boutique Prestashop Lorsqu'un internaute arrive sur votre site de vente en ligne en général il n'a pas la patienc...

Laisser un commentaire

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