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 3701
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...
Comment modifier le message de Copyright en bas de page | Prestashop 1.7 ?
views 20872
Lors du paramétrage de votre boutique Prestashop, vous désirez peut-être modifier le message de Copyright en bas de page. Par défaut, le message est le suivant : © 2016 – Ecommerce software by PrestaShop™. Lorsque nous cliquons sur lien,  on est transféré sur le site de Prestashop. Dans un premier temps, nous verrons comment modifier le message et dans un deuxième temps, comment modif...
Créer un thème enfant avec PrestaShop 1.7
views 4341
Qu’est ce qu’un thème enfant ? Un thème Prestashop est un ensemble de fichiers qui permet de gérer les fonctionnalités et le visuel d ‘un site PrestaShop. Si vous apportez des modifications à votre thème, la mise à jour vers de nouvelles versions peut les écraser. C’est dans ce contexte qu’entre la notion  de thème enfant. Un thème enfant hérite des fonctionnalités et du visuel du thème pare...
Greffer le module bloc social dans displayNav | Astuce Prestashop 1.6
views 2894
Ce tutoriel va vous permettre de greffer le module "bloc social" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 -------------------------------------------------------- On va dans un premier temps modifier le fichier blocksocial.php 1) Pour cela allez dans modules > blocksocial> blocksocial.php. Tout à la fin du code, juste avant la dernière accolade coll...
Comment configurer les mails dans PrestaShop 1.6 & PrestaShop 1.7
views 10612
Dans ce tutoriel, nous allons voir comment configurer les mails dans PrestaShop. En effet, votre site en ligne va envoyer de nombreux messages à vous et vos clients : création de compte, confirmation de commande.... il est alors important de bien paramétrer cette partie. Pour Prestashop 1.6 & PrestaShop 1.7  La procédure est identique pour les deux versions A) Accéder aux mails Depui...

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 *