Guide Pratique : Intégrer des Google Fonts sur Prestashop
Sommaire
La typographie est un élément fondamental qui contribue à l’identité visuelle et à l’expérience utilisateur de votre boutique en ligne. Un choix judicieux des polices peut non seulement améliorer l’esthétique de votre site, mais aussi augmenter la lisibilité et l’engagement des visiteurs. Google Fonts offre une vaste collection de polices web gratuites et facilement intégrables, y compris des options populaires comme Lato, Roboto, et Open Sans. Dans ce tutoriel, nous vous guiderons à travers le processus d’intégration des Google Web Fonts à votre boutique Prestashop.
Étape 1 : Sélection de la Police sur Google Fonts
Premièrement, explorez la bibliothèque Google Fonts pour trouver la police qui correspond à l’identité de votre marque. Par exemple, la police Raleway est souvent plébiscitée pour la mise en valeur des titres..
Étape 2 : Récupération du Code de la Police
Une fois que vous avez choisi une police, Google Fonts générera un morceau de code que vous devrez ajouter à votre site.
Voici à quoi cela ressemble :
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
Étape 3 : Intégration du Code dans Prestashop 1.7 et 8
Intégrez le code fourni dans le fichier head.tpl de votre site Prestashop. Vous pouvez le faire en accédant à ce fichier via le FTP en suivant le chemin :
/themes/NomDuTheme/templates/partials/head.tpl
Ouvrez le fichier Head.tpl puis recherchez aux alentours de la ligne 80 :
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}Juste après, ajoutez le script de la Google Font que vous avez choisi :
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
{/block}Étape 4 : Application de la Police à votre Design
Après avoir intégré le code, appliquez la police à votre design en modifiant votre fichier CSS.
Voici un exemple qui va cibler les titres h1 :
h1 {font-family: 'Raleway', sans-serif;}
Notez que vous devrez remplacer ‘Raleway’ par le nom de la police que vous avez choisie si vous optez pour une autre police.
Considérations SEO et Performance
L’intégration de polices externes peut avoir un impact sur la performance de votre site, ce qui, à son tour, peut affecter votre SEO. Assurez-vous de tester la vitesse de chargement de votre site après l’intégration et envisagez des stratégies d’optimisation telles que la mise en cache ou la compression des fichiers pour maintenir une performance optimale.
Conclusion sur l’utilisation des Google Fonts
Intégrer des polices uniques via Google Fonts est une manière efficace d’enrichir le design de votre boutique Prestashop. En suivant ces étapes simples, vous pouvez améliorer l’expérience utilisateur, l’esthétique de votre site, et potentiellement augmenter l’engagement des visiteurs et les taux de conversion.
Laisser un commentaire