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

Gratuit : Template Mails | Astuce Prestashop 1.6
views 3707
Je vous propose une nouvelle mise en page plus minimaliste pour les mails. Le fichier comprend la version anglaise et française. Vous pouvez télécharger les templates gratuitement. Cette astuce Prestashop est valable pour la version 1.6 et 1.5 1) Exemple de mails   A noter : - Il est possible de modifier le contenu des mails. Pour cela il faut aller dans Localisation > Traductio...
Ajouter des tabs dans une page cms | Astuce Prestashop 1.6
views 1476
Ce tutorial va vous permettre d'insérer des tabs dans vos pages cms Astuce Prestashop 1.6 -------------------------------------- 1) Insérer une tab horizontal sur la page cms de Prestashop  1.1) Une fois sur la page cms, cliquez sur l'icône source code 1.2 Insérez le code suivant 1.3 Enregistrer et visualiser 1.4 Si vos tabs ne fonctionnent pas, il sera nécessaire d'aj...
Guide complet pour vos campagnes Google Adwords
views 535
Ce guide est en vente sur Amazon.fr et offert en format PDF.  Complet, Intuitif et plein d'astuces. Allez jeter un oeil ! Besoin de gérer des campagnes Google AdWords ? Allez découvrir la formation AdWords proposée par refeo.com, vous trouverez, en plus des précieuses informations livrées, un guide complet qui vous expliquera tous les contours de l'outil Google AdWords, de même que la façon dont...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 16535
Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, le SAV et les statistiques (voir l'article)  Personnaliser qui regroupe les modules, le design, le transport, le paiement et l’international Configurer qui regroupe les préférences et les paramètres avancés. Dans cet article, nous allons ...
Braintree – Une solution de Paiement sans VAD | Prestashop
views 5788
Qu'est-ce que Braintree ?  Braintree offre une solution complète de paiement pour les e-marchands sur mobile, tablette et bureau. C'est une entreprise américaine qui a été rachetée par Paypal en 2013. Comment j'ai connu Braintree ?  Un de mes clients a souscrit un Forfait Intégral Evolution (25€ par mois) chez Paypal. Après avoir installé le module dans le cms Prestashop, je me suis aperçue q...

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 *