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

Le nouveau menu du back-office de Prestashop 1.7 – Partie 2
views 4989
Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, le SAV et les statistiques (voir l'article)  Personnaliser qui regroupe les modules, le design, le transport, le paiement et l’international Configurer qui regroupe les préférences et les paramètres avancés. Dans cet article, nous allons ...
Quelques variables qui peuvent vous aider pour votre mise en page – Prestashop 1.7 ...
views 10703
Dans le tuto du jour, je vais énumérer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site. N'hésitez pas à les partager via les commentaires ------------------ Insérez un lien vers une page CMS dans un fichier TPL Prestashop 1.6 : {$link->getCmsLink()} Exemple : l'id de la page cms est 3 Prestashop 1.7 : {url entity='cms' id=$i...
Prestashop 1.6 | Slider sur toute la largeur sur votre page d’accueil
views 8868
Voici un tutorial qui va vous permettre d'afficher le slider de votre page d'accueil sur toute la largeur. Valable pour prestashop 1.6 A noter : la largeur maximum de l'ensemble de votre contenu est 1170px.  Si vous désirez afficher une photo correctement sur votre site, je vous conseille une largeur de 1170px. La hauteur est libre. Update : il se peut que ce tuto ne fonctionne pas. La no...
Mettre à jour automatiquement le taux de change | Astuce Prestashop 1.6
views 1756
Vous désirez ouvrir votre boutique à l'international et indiquez le taux de change. Voici un petit tuto qui va vous montrer comment mettre à jour automatiquement le taux de change grâce au service cron. ------------------------------ Avant de commencer, un petit topo : Qu'est que le service cron :  Le principe du service CRON est simple, il permet d'exécuter des tâches de manière réguli...
Gratuit : Template Mails | Astuce Prestashop 1.6
views 3297
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...

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 *