Votre boutique Prestashop manque de peps’ ? C’est vrai qu’utiliser les polices traditionnelles comme Arial, Tahoma ou encore Georgia peut s’avérer ennuyant. C’est pourquoi je vous propose un rapide tuto pour utiliser les Google Web Font.
Comment ajouter une Google Web Font à votre site web ?
Des polices personnalisées intégrées dans votre boutique Prestashop pour lui donner un look sympa se démarquant des autres sites.
Pour intégrer les Google Web Fonts dans votre boutique Prestashop, faites ceci :
- Trouvez la Google Font qui vous convient : Allez ici https://fonts.google.com, parcourez les polices avec les filtres proposés et choisissez-en une en cliquant sur Quick-use.
- Installez la Google Web Font choisie : Une fois la police Google choisie, vous aurez 4 points à définir/paramétrer
- Le style de la police
- Le langage voulu
- Le bout de code à copier dans votre fichier header.tpl avant la balise
</head>:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> - La propriété CSS à intégrer dans le fichier global.css pour l’élément voulu :
font-family: 'Amatic SC', cursive;
Le petit plus : Google vous informe sur le temps de chargement de la police que vous voulez installé car c’est bien beau tout ça mais les Google Web Fonts demandent un temps de chargement de votre boutique légèrement plus long.
A consommer avec modération donc !
Ajout de polices et icônes Google Fonts : quels impacts sur l’expérience utilisateur ?
Pour vous démarquer des autres boutiques en ligne et ainsi mieux attirer les internautes et optimiser les ventes, l’ajout de polices et d’icônes Google Fonts est bien tentant. Néanmoins, l’installation de fonts et d’icônes depuis Google Fonts doit se faire avec modération. Trop de fonts et de polices originaux peut avoir un impact important sur la webperf, notamment le ralentissement de la vitesse de chargement de pages et la diminution de la qualité de l’expérience utilisateur.
L’usage de plusieurs familles de fonts a un impact négatif sur le LCP ou mesure de temps de chargement du contenu. Cela peut, en effet, entraîner une vitesse de chargement de plus de 2,5 secondes et ainsi impacter négativement sur la patience et sur la motivation des internautes.
L’usage de plusieurs polices et icônes depuis Google Fonts engendre également sur le CLS ou stabilité visuelle des pages consultées par les internautes. Il devient alors difficile pour les visiteurs de consulter les produits que vous vendez, de choisir les produits à intégrer dans le panier, de se tromper de bouton quand il est question de valider la commande sur votre magasin en ligne…
Intégrer des polices et icônes Google Fonts sur votre magasin en ligne n’est pas interdit. Néanmoins, analysez toujours l’impact de cette action sur la web performance avant toute validation. Tenez compte des indicateurs Core Web Vitals afin de ne pas nuire à l’expérience utilisateur sur votre site marchand.
Comment améliorer les performances de son site web ?
Les polices et tous les autres élément de son site web e-commerce ou vitrine doivent être optimisés pour améliorer la rapidité de chargement.
Pour aller plus loin, je vous conseille ces articles concernant la performance et la rapidité de chargement :
Optimiser les performances de votre site PrestaShop ou WordPress
Optimisation des performances de PrestaShop
Comment réaliser un audit de performances WordPress ou PrestaShop avec Dareboost ?
10 outils gratuits pour tester la vitesse de votre site e-commerce