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

Installer manuellement un module PrestaShop
views 3265
Voici un petit tuto pour vous permettre d'installer manuellement votre module PrestaShop Pour ce tuto, nous allons partir du fait que vous avez acheté un module depuis le addons de Prestashop 1) Etape 1 Depuis le back-office de votre compte "Addons PrestaShop", cliquez sur l'onglet "Téléchargement" 2) Etape 2 Cliquer sur l'icone "flèche" du module que vous désirez télécharge...
Optimisez le sitemap de votre boutique | Astuce Prestashop 1.6
views 2884
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 permet de fournir aux principaux moteurs de recherche des informations sur les URLs d'un site web qu'ils ne pourraient pas découvrir par eux-mêmes Comment créer un sitemap depuis le back-office de Prestashop  Il faut aller dans Modules et Services ...
Quelques variables qui peuvent vous aider pour votre mise en page – Prestashop 1.7 ...
views 12301
Dans le tuto du jour, je vais énumérer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site. N'hésitez pas à les partager via les commentaires ------------------ Insérez un lien vers une page CMS dans un fichier TPL Prestashop 1.6 : {$link->getCmsLink()} Exemple : l'id de la page cms est 3 Prestashop 1.7 : {url entity='cms' id=$i...
Supprimer redirection Home après s’être connecté lors du tunnel d’achat en 5 ...
views 1163
Après avoir installé le tunnel de commande en 5 étapes sur le site e-commerce d'un client, j'ai rencontré un problème lors de l'étape inscription. En effet, si vous désirez vous connecter à votre compte durant le tunnel d'achat en 5 étapes, vous êtes redirigé automatiquement vers la page d’accueil au lieu d'être renvoyé sur l'étape suivante. Comment supprimer ce problème de direction de Pr...
Greffer le module bloc social dans displayNav | Astuce Prestashop 1.6
views 2689
Ce tutoriel va vous permettre de greffer le module "bloc social" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 -------------------------------------------------------- On va dans un premier temps modifier le fichier blocksocial.php 1) Pour cela allez dans modules > blocksocial> blocksocial.php. Tout à la fin du code, juste avant la dernière accolade coll...

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 *