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

Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6
views 3820
Vous désirez insérer le drapeau du pays des langues que vous avez choisies pour votre site e-commerce. L'astuce est simple et rapide. Valable pour Prestashop 1.6. ------------------- 1) Ouvrez le fichier blocklanguages.tpl qui se situe dans themes > lenomdevotretheme > modules > blocklanguages > blocklanguages.tpl. Il va falloir insérer ce code à deux endroits.  Par déf...
Insérer une page CMS sur votre formulaire de contact | PrestaShop 1.6
views 2883
Vous désirez insérer une page cms à l'intérieur de votre formulaire de contact de votre boutique PrestaShop Rien de plus simple avec ce petit tuto ! Etape 1 : Override du fichier : ContactController.php Créer un fichier qui se nommera ContactController.php et placez le dans  override/controllers/front/ puis insérez le code suivant : Plus de précisions Code 1: $cms=New CMS(...
La structure des fichiers du nouveau thème Classic | Prestashop 1.7
views 15423
La version stable de Prestashop 1.7 est sortie ce lundi et comme vous pourrez le constater, la structure des fichiers dans le dossier thème a totalement été remaniée. Maintenant, on retrouve un seul fichier CSS et JS pour tout le site. Les TPL sont classés dans différents dossiers: commandes, clients, catalogues.... Voici la nouvelle structure: A) assets | css ------> theme.css | img ...
Lenteur Enregistrement Produit BO 1.6.0.11
views 1915
Vous avez téléchargé la version Prestashop 1.6.011 et là grand problème lorsqu'on accède à la fiche produit on s'aperçoit que les boutons "enregistrer et rester" et "enregistrer" sont grisés avec un logo de chargement et il faut attendre un bon moment pour qu'ils deviennent actifs. Après plusieurs recherches, j'ai trouvé la solution qui a fonctionné grâce à sandrocirlin, un membre du fo...
Astuce : Centrer votre menu dans Prestashop 1.6
views 4077
Voici un petit tuto qui va vous permettre de centrer votre menu dans prestashop Cette astuce Prestashop est valable pour la version 1.6 Comment centrer le menu sur ma boutique Prestashop ?  Il y a q'un seul fichier à modifier : superfish-modified.css  qui appartient au module blocktopmenu 1) Dans .sf-menu, ajouter text-align:center 2) Dans .sf-menu > li, remplacer float:lef...

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 *