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

Page blanche bon de livraison | Astuce Prestashop 1.6
views 1498
Lorsque vous désirez télécharger le bon de livraison depuis le back-office de prestashop, vous avez le droit à une jolie page blanche. Ce bug se trouve sur la version 1.6.1.4 et 1.6.1.5 de Prestashop Voici la solution pour régler ce problème Ouvrir le fichier TemplateDeliverySlip.php qui se situe dans le dossier classes/pdf Collez le code suivant tout à la fin juste avant la dern...
L’Affichage des colonnes | Astuce Prestashop 1.6
views 2171
La dernière version de Prestashop (1.6) permet de gérer plus facilement l'affichage de la colonne de droite ou de gauche et de choisir sur quelles pages les afficher directement depuis le back-office. Où configure t-on l'affiche des colonnes  dans le back office de Prestashop ?  Allez dans l'onglet Préférences > Thèmes cliquez sur le lien Paramètres avancés du thème actif sur votre boutique. ...
Lenteur Enregistrement Produit BO 1.6.0.11
views 1909
Vous avez téléchargé la version Prestashop 1.6.011 et là grand problème lorsqu'on accède à la fiche produit on s'aperçoit que les boutons "enregistrer et rester" et "enregistrer" sont grisés avec un logo de chargement et il faut attendre un bon moment pour qu'ils deviennent actifs. Après plusieurs recherches, j'ai trouvé la solution qui a fonctionné grâce à sandrocirlin, un membre du fo...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 5056
Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en bloc Cette astuce Prestashop a été testée sur la version 1.6.1 Attention, cette astuce est conseillée pour les personnes qui connaissent un minimum Prestashop, html et css. A)  Bloc Populaire 1)  Aller dans Modules > Positions. 1.1 ) D...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 16216
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 ...

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 *