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 3358
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...
Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6
views 2617
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 modifier le message de Copyright en bas de page | Prestashop 1.7 ?
views 18560
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...
3 produits achetés le 2ème gratuit | Astuce Prestashop
views 4568
Vous désirez mettre en place une campagne de promotion : x produits achetés, 1 offert. Il est très facile de configurer ce cas de figure dans Prestashop Comment mettre en place cette promotion dans le back-office de Prestashop  ?  A) Connectez-vous au back-office de Prestashop B) Allez dans l'onglet Promotions > Règles Paniers C) Configurer les informations comme ci-dessous ...
Afficher le champ adresse sur plusieurs lignes | Bloc contact infos – Astuce Presta...
views 1027
Cette astuce Prestashop est valable pour la version 1.6 Vous l'avez sûrement remarqué, en bas de page, l'adresse de votre magasin est sur une seule ligne. Ce rapide tutoriel va vous permettre d'afficher le champ adresse sur plusieurs lignes Valable pour Prestashop 1.6 et 1.5 ----------------------------------- 1) Pour insérer les informations de votre boutique, il faut aller...

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 *