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

Afficher les disponibilités sur la liste de produits | Astuce Prestashop 1.6
views 3544
Ce tutorial va vous permettre d'afficher les disponibilités (en stock....) sur la liste des produits du bloc Populaire , Nouveaux Produits, Meilleures Ventes ...., Cette astuce Prestashop est valable pour la version 1.6 ------------------------------- 1) Modification du fichier product-list.tpl. Ouvrez le fichier product-list qui se situe à l'intérieur de votre thème est inséré le code...
Insérer un dropdown panier dans Prestashop 1.7
views 7407
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'il y a encore énormément de bugs, l'ergonomie laisse vraiment à désirer notamment sur la partie mobile.... Une des fonctionnalités qui a été supprimée est le dropdown panier. Voici un tutoriel qui va vous permettre de le remettre. Tout ce passe...
Comment créer un compte Paypal Professionnel ? | E-ecommerce
views 2069
Si  vous désirez installer Paypal comme moyen de paiement sur votre site e-commerce, il sera nécessaire de créer  un compte professionnel. Voici les différentes différentes étapes. Etape 1:  Accédez à la page Paypal et cliquez sur Ouvrir un compte  Pour accéder à la page Paypal, cliquez-ici  Etape 2 : Choisissez l'option "Compte Professionnel" Etape 3 : Insérez votre adresse e-mai...
Supprimer le cadre blanc autour de vos images | Astuce Prestashop 1.6
views 4936
Lorsqu’on upload une image dans Prestashop, ce dernier la redimensionne selon les différents formats spécifiés dans « préférences/images ». Mais si vous regardez bien le front-office de  votre boutique, vous pouvez remarquer que Prestashop ajoute par défaut un cadre blanc autour de votre image. Cette astuce Prestashop est valable pour la version 1.6 Voici la solution pour remédier à ce pr...
Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 2280
Qu'est ce qu'une BDD (base de données) ?  Une base de données est un outil qui permet de collecter et organiser des informations. Exemple: vos produits, vos images, vos textes, vos commandes, vos clients.... Pourquoi faire une sauvegarde ?  En cas de bug, d'une fausse manipulation, d'un module défectueux.... il sera peut-être nécessaire de réinitialiser votre base de données. D'où l'import...

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 *