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

Désactiver le bouton Comparer | Astuce Prestashop 1.6
views 2267
On me demande très souvent comment on désactive la partie « comparer » dans le back office de Prestashop. C'est très simple : Allez dans le back office de Prestashop puis dans Préférences > Produits, puis mettre 0 à comparaison de produits Et voila le tour est joué.
Seo et Prestashop | Astuces
views 1099
Vous avez une boutique en ligne ou le projet d'en ouvrir une ? Il y a une étape indispensable à ne surtout pas oublier ou négliger : le Référencement - SEO. Avoir une boutique c'est bien, mais faut-il qu'elle soit visible sur le net. Ben oui, un site e-commerce qui se situe en 6ème page et/ou à une faible notoriété à très peu de chance d'être visité. Mais rien n'est perdu, il faut utilise...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 5023
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...
Connaître les modules de la page d’accueil | Astuce Prestashop 1.6
views 17171
Vous avez installé votre boutique Prestashop 1.6 et désirez modifier votre page d'accueil ? Ce petit tuto va vous aider à le faire en indiquant le nom du module que vous devez utiliser pour modifier votre slider, votre menu.... Ils sont facilement accessibles depuis votre back-office PrestaShop en cliquant sur l’onglet « Modules et services ». Si vous désirez aussi modifier le fichier tpl ou cs...
Quels sont les modules utilisés sur la page d’accueil ? | Prestashop 1.7
views 17677
Par rapport à Prestashop 1.6, la page d'accueil a totalement été relooké et le nom et le hook des modules ont été modifiés. Voici une check-list des modules utilisés par défaut pour la page d'accueil. Vous trouverez: - le nom du hook sur lequel le module est positionné; - le nom du module utilisé dans le back-office; - le nom que porte le module dans le dossier "modules' situé dans votre ...

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 *