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

Paypal, Hipay & Payplug – Quelle solution de paiement choisir
views 3894
Pour une petite boutique en ligne, mettre en place un contrat de vente à distance (VAD) peut s'avérer difficile en raison des coûts élevés que demande les banques. Aujourd'hui, il existe d'autres solutions de paiement dont Paypal, Hipay et Payplug Ces établissements sont autorisés par l’ACP à exercer en France. Ils ne nécessitent pas de contrat de VAD pour être mis en oeuvre A) Comparat...
3 produits achetés le 2ème gratuit | Astuce Prestashop
views 5305
Vous désirez mettre en place une campagne de promotion : x produits achetés, 1 offert. Il est très facile de configurer ce cas de figure dans Prestashop Comment mettre en place cette promotion dans le back-office de Prestashop  ?  A) Connectez-vous au back-office de Prestashop B) Allez dans l'onglet Promotions > Règles Paniers C) Configurer les informations comme ci-dessous ...
Configurer le moteur de recherche – Prestashop 1.7
views 7862
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 vos produits lorsque qu’un client effectuera une recherche. Tout d'abord, connectez à votre back-office et dans le menu de gauche, sélectionnez Configurer -> Paramètres de la boutique -> Rechercher. Vous arrivez sur une page qui vous ...
Configurer le mode multi-boutique dans PrestaShop 1.6 & 1.7
views 25214
A NOTER : malheureusement à ce jour, il existe encore pas mal de bugs avec la version 1.7 (la dernière 1.7.6 ne régle pas tous les problèmes) Qu’est ce que la multi-boutique ? La multi-boutique est un groupe de boutiques qui partage la même administration. Vous pouvez donc gérer plusieurs boutiques avec un même back-office PrestaShop. Pour qui ? des commerçants qui désirent faire du B2B ( ...
Désactiver « Recevez les offres spéciales de nos partenaires » | Astuce Prestashop 1.6...
views 2587
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-dessous Sous quel terme se trouve cette option dans le back-office de Prestashop  Dans le back office de Prestashop, cette phrase est englobée sous le terme "Opt-in" Comment supprimer cette option dans le back-office de Prestashop  Voici la...

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 *