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

Bug Google MAP – Petit problème… | Prestashop 1.6
views 3816
Vous êtes sur Prestashop 1.6 et la carte Google MAP, ne s'affiche pas sur la page "magasins" ? Voici un tutoriel qui va permettre de régler ce peti...
Greffer le menu haut horizontal dans displayNav | Astuce Prestashop 1.6
views 4046
Ce tutoriel va vous permettre de greffer le module "menu haut horizontal" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 ...
Votre boutique Prestashop est-il compatible mobile ?
views 829
Google ayant mis en place son label « Mobile Friendly », dans ses résultats de recherche, il devient maintenant incontournable d'avoir un site version...
Prestashop 1.6 | Slider sur toute la largeur sur votre page d’accueil
views 8399
Voici un tutorial qui va vous permettre d'afficher le slider de votre page d'accueil sur toute la largeur. Valable pour prestashop 1.6 A noter :...
Insérer un dropdown panier dans Prestashop 1.7
views 5890
Comme vous avez certainement pu le constater, pas mal de fonctionnalités ont disparus dans la version 1.7 de Prestashop. je trouve personnellement qu'...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 4650
Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en blo...
Configurer le moteur de recherche – Prestashop 1.7
views 4558
Le tutoriel d'aujourd'hui va vous permettre de configurer le moteur de recherche internet de votre boutique Prestashop 1.7 et ainsi de rendre visible ...
Mettre à jour automatiquement le taux de change | Astuce Prestashop 1.6
views 1620
Vous désirez ouvrir votre boutique à l'international et indiquez le taux de change. Voici un petit tuto qui va vous montrer comment mettre à jour a...
Les modules installés par défaut sur le front-office de votre boutique | Prestashop 1.7
views 2894
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...
Pourquoi faut-il migrer sur Prestashop 1.6 | Infographie
views 186
Cette infographie, met en avant les différentes raisons pour migrer son site Prestashop sur la version 1.6 En voici quelques-unes : - le thème par d...

Laisser un commentaire

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