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

Insérer un favicon dans votre boutique Prestashop
views 2995
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 l...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 12598
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...
Où Changer le nom de sa boutique | Astuce Prestashop 1.6
views 2256
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...
Comment configurer les mails dans PrestaShop 1.6 & PrestaShop 1.7
views 836
Dans ce tutoriel, nous allons voir comment configurer les mails dans PrestaShop. En effet, votre site en ligne va envoyer de nombreux messages à vous ...
Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6
views 1660
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 e...
Votre boutique Prestashop est-il compatible mobile ?
views 654
Google ayant mis en place son label « Mobile Friendly », dans ses résultats de recherche, il devient maintenant incontournable d'avoir un site version...
Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6
views 2862
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 ...
Désactiver “Recevez les offres spéciales de nos partenaires” | Astuce Prestas...
views 1614
Cette phrase  "Recevez les offres spéciales de nos partenaires"  apparait lors de la création d'un compte comme vous pouvez le voir sur la photo ci-de...
Comment dupliquer un thème Prestashop 1.6 ?
views 2147
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...
Améliorer les performances de votre boutique Prestashop 1.6
views 4539
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 *