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 “produit deja acheté” sur la page produit | Prestashop 1.6
views 592
Aujourd'hui, nous allons voir comment ajouter la notification "Produit déjà acheté le ....." sur la page produit. Cette astuce (donnée par Nemops) ...
Google Analytics et Prestashop : Installation et configuration
views 10130
Dans ce tutoriel,  nous allons voir comment installer Google Analytics sur son site Prestashop A) Qu'est-ce que Google Analytics ? Google Analytics ...
Désactiver les frais de port dans le block panier | Astuce Prestashop 1.6
views 4872
Pour éviter toute confusion, je préfère désactiver les frais de port dans le block panier. En effet, si le client n'est pas connecté à son compte, ...
Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 1439
Qu'est ce qu'une BDD (base de données) ?  Une base de données est un outil qui permet de collecter et organiser des informations. Exemple: vos pro...
Afficher les fournisseurs sur les pages produits | Astuce Prestashop 1.6
views 2135
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...
Modifier l’arrière-plan de votre boutique Prestashop 1.7
views 7190
Dans ce tutorial, nous allons voir comment modifier les couleurs de fond de votre boutique en ligne Prestashop 1.7. Tout se passe à l'intérieur des co...
Votre boutique Prestashop est-il compatible mobile ?
views 795
Google ayant mis en place son label « Mobile Friendly », dans ses résultats de recherche, il devient maintenant incontournable d'avoir un site version...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 2
views 4571
Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, l...
Gérer les paniers abandonnés | Astuce Prestashop 1.6
views 3470
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...
Page blanche bon de livraison | Astuce Prestashop 1.6
views 1339
Lorsque vous désirez télécharger le bon de livraison depuis le back-office de prestashop, vous avez le droit à une jolie page blanche. Ce bug se tr...

Laisser un commentaire

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