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 3724
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...
Afficher les disponibilités sur la liste de produits | Astuce Prestashop 1.6
views 2481
Ce tutorial va vous permettre d'afficher les disponibilités (en stock....) sur la liste des produits du bloc Populaire , Nouveaux Produits, Meilleures...
Supprimer “Imprimer” sur la fiche produit | Astuce Prestashop 1.6
views 1850
Personnellement, je n'arrive plus à me souvenir la dernière fois où j'ai imprimé une fiche produit depuis le site d"une boutique en ligne. Je suppose ...
POSITION : inverser le hook displayHome et DisplayHomeTab | Astuce Prestashop 1.6
views 1831
Ce tuto va vous permettre d'inverser le hook displayHome et hookDisplayHomeTab, situé sur la page d'accueil de Prestashop A la base voici comment s...
Greffer le menu haut horizontal dans displayNav | Astuce Prestashop 1.6
views 3849
Ce tutoriel va vous permettre de greffer le module "menu haut horizontal" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 ...
Ajouter un fichier audio sur les page cms | Astuce Prestashop 1.6
views 705
Vous avez peut-être essayé d'insérer un fichier audio dans vos pages cms mais sans succès ? Voici un petit tuto rapide (3 étapes) qui vous le perme...
COMMENT AJOUTER UN TRANSPORTEUR DANS PRESTASHOP 1.6 ?
views 2331
Dans ce tutoriel, nous allons voir comment ajouter et paramétrer un transporteur, afin que vos clients puissent choisir son mode de livraison sur votr...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 909
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieu...
Comment créer une fiche Produit sur Prestashop 1.7
views 7135
Dans ce tutoriel, nous allons voir comment créer une fiche produit dans Prestashop 1.7. Comme vous pourrez le constater, cette page diffère totalem...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 4549
Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en blo...

Laisser un commentaire

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