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

Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 2248
Qu'est ce qu'une BDD (base de données) ?  Une base de données est un outil qui permet de collecter et organiser des informations. Exemple: vos produits, vos images, vos textes, vos commandes, vos clients.... Pourquoi faire une sauvegarde ?  En cas de bug, d'une fausse manipulation, d'un module défectueux.... il sera peut-être nécessaire de réinitialiser votre base de données. D'où l'import...
Pourquoi faut-il migrer sur Prestashop 1.6 | Infographie
views 238
Cette infographie, met en avant les différentes raisons pour migrer son site Prestashop sur la version 1.6 En voici quelques-unes : - le thème par défaut de Prestashop est plus esthétique que l'ancien, plus  élégant, souple et permet de mettre en avant des bannières personnalisables. - il est possible de modifier les couleurs, les polices, etc directement depuis le Front Office. - la création ...
Votre boutique Prestashop est-il compatible mobile ?
views 1177
Google ayant mis en place son label « Mobile Friendly », dans ses résultats de recherche, il devient maintenant incontournable d'avoir un site version mobile. Il faut noter aussi qui si votre site n'est pas responsive ou compatible Mobile, vous allez perdre des places dans les pages de résultats de Google. Google à mise à votre disposition un outil très simple pour tester la comptabilité de vot...
L’Affichage des colonnes | Astuce Prestashop 1.6
views 2115
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. ...
Insérer pop-up dans une page CMS | Astuce Prestashop 1.6
views 4149
Un client désirait insérer un système de pop-up dans la page cms de Prestashop Je ne voulais pas installer un n-ième module pour faire simplement cela ni insérer un autre script/bibliothèque que ceux inclus dans Prestashop. Cette astuce Prestashop est valable pour la version 1.6 Voilà l'astuce. ------------ 1) Ouvrir un ficher qui se nommera Validate.php, insérer le code suivant...

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 *