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

Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6
views 3730
Vous désirez insérer le drapeau du pays des langues que vous avez choisies pour votre site e-commerce. L'astuce est simple et rapide. Valable pour Prestashop 1.6. ------------------- 1) Ouvrez le fichier blocklanguages.tpl qui se situe dans themes > lenomdevotretheme > modules > blocklanguages > blocklanguages.tpl. Il va falloir insérer ce code à deux endroits.  Par déf...
Petit aperçu du thème Classic de prestashop 1.7
views 7708
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 plus minimaliste, fonctionnel et ergonomique. Il faut savoir aussi que la migration de Prestashop 1.6, 1.5....  vers  PrestaShop 1.7 sera impossible. D'un point de vue perso : - je ne suis pas fan des couleurs en particulier le gris (je l...
Les modules installés par défaut sur le front-office de votre boutique | Prestashop 1.7
views 3498
La version Prestashop 1.7 officielle est sortie. La liste des modules installée par défaut sur votre boutique a considérablement diminué puisqu'il y a en plus que 19. Les noms ont aussi été modifiés. Pour les consulter, il faut aller dans le back-office de Prestashop Modules > Modules & Services > Gérer les modules installés Liens pour suivre sur réseaux sociaux Ce module permet...
Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6
views 2169
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 ...
Configurer le mode multi-boutique dans PrestaShop 1.6 & 1.7
views 25295
A NOTER : malheureusement à ce jour, il existe encore pas mal de bugs avec la version 1.7 (la dernière 1.7.6 ne régle pas tous les problèmes) Qu’est ce que la multi-boutique ? La multi-boutique est un groupe de boutiques qui partage la même administration. Vous pouvez donc gérer plusieurs boutiques avec un même back-office PrestaShop. Pour qui ? des commerçants qui désirent faire du B2B ( ...

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 *