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

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7
views 11015
Aujourd’hui, nous allons voir comment configurer le diaporama de votre page d'accueil sur votre boutique en ligne sur Prestashop 1.6 &Prestashop 1.7 ------------------------------------------------------------------------------------------------------------------------ Tutorial pour Prestashop 1.6 A noter la taille de l'image pour le diaporama est de 779px de large pour 448px de haut. ...
Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6
views 2769
Grâce à ce tuto, vous allez pouvoir supprimer le nom de votre boutique de la balise Meta Title de vos pages sur votre site e-commerce Astuce Prestashop 1.6 ---------------------------------- Dans un premier temps, nous allons overrider le fichier Meta.php. En effet ces dans ce fichier que nous allons supprimer le paramètre Configuration::get('PS_SHOP_NAME') qui fait référence au nom de vo...
Comment afficher le nom du produit complet – PrestaShop 1.6 &1.7
views 2406
Dans PrestaShop 1.6 et 1.7, si vos noms de produit sont trop long, ils vont être coupés. Vous désirez peut-être avoir le nom complet, c'est très simple mais il faudra apporter la modification directement dans le fichier, on ne peut pas le faire depuis le back-office de PrestaShop PrestaShop 1.6 Ouvrir le fichier product-list.tpl qui se situe dans themes > nomdevotretheme > product-...
Supprimer redirection Home après s’être connecté lors du tunnel d’achat en 5 ...
views 1284
Après avoir installé le tunnel de commande en 5 étapes sur le site e-commerce d'un client, j'ai rencontré un problème lors de l'étape inscription. En effet, si vous désirez vous connecter à votre compte durant le tunnel d'achat en 5 étapes, vous êtes redirigé automatiquement vers la page d’accueil au lieu d'être renvoyé sur l'étape suivante. Comment supprimer ce problème de direction de Pr...
Taille des Images du thème par défaut de Prestashop 1.6
views 6722
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...

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 *