DEVELOPPEUR WEB FREELANCE Expert e-commerce Prestashop depuis 2010

20 févr.
2012

Utiliser l'API Google Web Fonts sur votre boutique Prestashop

Utiliser l'API Google Web Fonts sur votre boutique Prestashop

Nous allons voir dans ce tutoriel ce qu'est l'API Google Web Fonts et comment l'utiliser sur votre boutique Prestashop. Lorsque l'on crée un site web, on se retrouve forcément confronté à la limitation des polices standards du web. L'utilisation d'images ou l'intégration d'une nouvelle police sur le serveur du site étaient jusqu'alors les seuls moyens de contourner cette limitation, mais ces méthodes présentent un certain nombre d'inconvénients.

Désormais, il est possible de contourner facilement cette limitation en utilisant l'API Google Web Fonts.

Qu'est-ce qu'une police standard pour le web (Web Safe Font) ?

Une police standard pour le web est une police d'écriture présente par défaut dans la majorité des systèmes d'exploitation (Windows, Linux...) et donc installée par défaut sur la majorité des ordinateurs.

 

Si l'internaute arrive sur un site qui contient une police qui n'est pas installée sur son ordinateur, son navigateur affichera alors une police alternative parmi celles qui sont installées.

 

Pour utiliser une police plus exotique sur un site web, il faut alors utiliser des images ou intégrer la police sur le serveur puisqu'il n'est pas envisageable d'obliger l'internaute à télécharger et installer une police sur son ordinateur ! Mais l'utilisation d'images nuit à l'optimisation du site et l'intégration d'une nouvelle police sur le serveur est plutôt fastidieux...

 

 

Qu'est-ce que l'API Google Web Fonts ?

L'API Google Web Fonts est un service proposé par Google vous permettant d'utiliser des centaines de polices différentes sur votre site web tout en vous évitant d'avoir recours à des images ou à l'intégration de polices sur votre serveur. Ces polices sont hébergées sur le serveur de Google et sont appelées par le navigateur dès que nécessaire. Cela signifie que l'internaute pourra afficher correctement la police Google Web Fonts même si la police en question n'est pas installée sur son ordinateur.

 

 

Comment utiliser Google Web Fonts sur votre boutique Prestashop

Rendez-vous sur le site Google Web Fonts et choisissez la police que vous souhaitez utiliser. Cliquez sur "Quick Use" et copiez le code HTML fourni par Google Web Fonts entre les balises <head>...</head> du fichier header.tpl de votre thème :

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' />

Pour utiliser la police choisie, ajoutez son nom aux éléments souhaités dans vos fichiers CSS :

font-family: 'Poiret One', cursive;

Vous pouvez utiliser plusieurs polices différentes, mais il est recommandé de ne pas en utiliser plus de trois, ceci afin de préserver la lisibilité et l'harmonie typographique de votre site mais également afin d'éviter de multiplier les requêtes et ralentir ainsi le chargement de vos pages.

 

 

Forcer la compilation smarty pour la prise en compte des modifications

Lorsque vous effectuez des modifications dans vos fichiers tpl, la compilation smarty doit être active sinon vos modifications ne sont pas prises en compte. Vous pouvez régler l'activation de la compilation smarty dans l'onglet Préférences de votre back-office.

Auteur de cet article : Sabrina ROUSSEAU

Développeur web freelance spécialiste de la solution e-commerce Prestashop depuis 2010. Créatrice du site web Prestacrea ainsi que des produits qui y sont proposés.

COMMENTAIRES

Aucun commentaire

Cet article a été rédigé il y a plus d'un an. Les commentaires sont fermés.