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

SPAM PRESTASHOP FORMULAIRE DE CONTACT
views 3676
Depuis qq temps, des robots de SPAM utilisent le formulaire de contact des boutiques PrestaShop pour envoyer des mails. Voici deux astuces  (les deux versions ont été testées)  pour la version Prestashop 1.6 - astuce 1 : I'm not a robot de google - astuce 2 : captcha invisible ASTUCE 1 1) Allez google Re-capcha : https://www.google.com/recaptcha/intro/invisible.html - En haut à droi...
Taille des Images du thème par défaut de Prestashop 1.6
views 6859
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...
Ajouter les fabricants dans la page produit | Astuce Prestashop 1.6
views 2749
Ce tuto va vous expliquer comment insérer les fabricants dans la page produit dans la version Prestashop 1.6 A) Mettre le nom du fabricant avec le lien sur la page produit  Ajouter les lignes suivantes dans le fichier product.tpl qui se situe dans votre thème à l'endroit à vous désirez que le fabricant apparaisse :  Résultat :  B) Mettre le logo du fabricant avec le lien sur la page ...
Insérer un dropdown panier dans Prestashop 1.7
views 7527
Comme vous avez certainement pu le constater, pas mal de fonctionnalités ont disparus dans la version 1.7 de Prestashop. je trouve personnellement qu'il y a encore énormément de bugs, l'ergonomie laisse vraiment à désirer notamment sur la partie mobile.... Une des fonctionnalités qui a été supprimée est le dropdown panier. Voici un tutoriel qui va vous permettre de le remettre. Tout ce passe...
Améliorer les performances de votre boutique Prestashop 1.6
views 5819
A) Connaitre les performances de sa boutique Prestashop Lorsqu'un internaute arrive sur votre site de vente en ligne en général il n'a pas la patience d'attendre le chargement d'une page. Par conséquent, plus le temps de chargement est long, plus le taux d'abandon est important. Aujourd'hui, il existe de nombreux sites pour tester la  performances de son site ecommerce, en ce qui me concern...

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 *