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

Comment créer une langue manuellement | Prestashop 1.6 / 1.7
views 2315
Vous ne désirez pas utiliser le pack de traduction de Prestashop ? Vous désirez faire vos traductions vous-même ? Prestashop 1.6 et 1.7 permet facilement de créer une nouvelle langue sur une boutique e-commerce. Le paramétrage est identique pour les deux versions, la seule différence est le chemin pour arriver à la page de création de langue. -------------------------------------- Si...
Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6
views 1918
Qu'est qu'un live chat ?  Le terme live chat désigne l'ensemble des moyens qui permet à un internaute de rentrer instantanément en contact  avec un employé du site afin de répondre à ses questions. Comment installer un live chat sur sa boutique Prestashop ?  Pour l'installer sur votre site en ligne, il vous faudra un module et s'enregistrer sur une platform. C'est très rapide et facile ...
Gratuit : Template Mails | Astuce Prestashop 1.6
views 3166
Je vous propose une nouvelle mise en page plus minimaliste pour les mails. Le fichier comprend la version anglaise et française. Vous pouvez télécharger les templates gratuitement. Cette astuce Prestashop est valable pour la version 1.6 et 1.5 1) Exemple de mails   A noter : - Il est possible de modifier le contenu des mails. Pour cela il faut aller dans Localisation > Traductio...
Insérer un favicon dans votre boutique Prestashop
views 4207
A) Qu'est ce qu'un favicon ?  Le favicon est l'icône qui se situe à  gauche de l'URL dans la barre d'adresse de votre navigateur B) Quelle est la taille d'un favicon ?  Cette icône a généralement une taille de 16 × 16 ou 32 × 32 pixels. C) Comment insérer un favicon sur ma boutique Prestashop ?  1. Vous devez créer une image de16 × 16 ou 32 × 32 pixels en utilisant Photoshop par exemp...
Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 2061
Il est vous peut-être arrivé de vouloir remettre votre produit en nouveauté Il existe deux solutions dont une donnée par Webbax Dupliquer votre produit Ajouter un champs "date de publication" dans la fiche produit. Comment ajouter un champs "date de publication" dans le back-office de Prestashop ?  A) Ouvrer le fichier « adminthemesdefaulttemplatecontrollersproductsinformat...

Une réponse à “Modifier la police d’écriture avec Google Fonts – PrestaShop 1.7”

  1. Kebaili dit :

    merci pour votre aide. le tuto est super

Laisser un commentaire

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