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)

body {font-family: 'Open Sans', sans-serif; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Fjalla One', sans-serif; }

 

ET VOILA LE RÉSULTAT

 

Articles similaires

Savoir si votre module est fiable pour Prestashop
views 402
Il existe aujourd'hui de nombreux modules (gratuits ou payants) et certains d'entre-eux peuvent avoir un impact négatif sur votre boutique (bug, lenteur....). Il existe deux astuces qui vont vous permettre de savoir si oui ou non vous pouvez installer le module sur votre boutique Prestashop 1) Utilisez le service de validation de Prestashop  Prestashop a créé un service qui permet de véri...
Connaître les modules de la page d’accueil | Astuce Prestashop 1.6
views 17051
Vous avez installé votre boutique Prestashop 1.6 et désirez modifier votre page d'accueil ? Ce petit tuto va vous aider à le faire en indiquant le nom du module que vous devez utiliser pour modifier votre slider, votre menu.... Ils sont facilement accessibles depuis votre back-office PrestaShop en cliquant sur l’onglet « Modules et services ». Si vous désirez aussi modifier le fichier tpl ou cs...
Configurer les réseaux sociaux sur la page produit | Prestashop 1.6 et 1.7
views 5250
Aujourd'hui, nous allons voir comment configurer les réseaux sociaux sur les pages produits de votre boutique e-commerce sous Prestashop 1.6 et 17 La configuration  est identique sur les deux versions, mais le chemin d'accès est différent. ———————————————————————————————————————— Tutorial pour Prestashop 1.6 Etape 1: Tout d’abord, connectez-vous au back-office de votre site Prestashop ...
Mettre sa boutique en maintenance et accéder à sa boutique  | Prestashop 1.6 et 1.7
views 5052
Lorsque vous désirez effectuer de grands changements sur votre boutique, je vous conseille de mettre votre boutique en maintenance c'est à dire de signaler à vos clients que votre site  est temporairement inaccessible. Vous seul aurez accès à votre boutique pour voir les changements. Si vous travaillez en local, le mode maintenance est inutile dans la mesure où les internautes n'y ont pas accès...
Google Analytics et Prestashop : Installation et configuration
views 10968
Dans ce tutoriel,  nous allons voir comment installer Google Analytics sur son site Prestashop A) Qu'est-ce que Google Analytics ? Google Analytics est un service gratuit d'analyse d'audience d'un site Web. Il vous permet d'obtenir un grand nombre d'informations comme : le nombre de personnes qui visitent votre site ; la localisation géographique de vos visiteurs ; le taux de rebon...

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 *