Blog Web & Design

Performance de site et polices de caractères personnalisées

Pour améliorer les temps de chargement de son site, une des méthodes est de charger les polices après le chargement de la page.

Dans l’esprit de l’amélioration progressive (ou progressive enhancement), les polices de caractère ( hors celles classiques ) sont considerées comme des améliorations et non comme des fonctionnalités de bases d’un site.

Ainsi, pour avoir un site avec de meilleures perfomances, il est conseillé de charger les polices de caractères de façon asynchrone, c’est à dire, les charger après le chargement de la page.
Dans cette optique, il n’est pas conseillé d’utiliser les codes fournis par Google, vous savez les codes embed et ceux à inserer en head du html, du moins en l’état dont il vous sont fournis, il faut en effet prévoir de les retravailler dans un format permettant une certaines temporisation.

Noter également qu’étrangement, votre notation au Google Page Speed peut être réduite si vous utilisez la méthode proposée par Google Font pour l’appel à leurs typos, un comble !

La bonne façon d’ajouter une typographie « exotique » sans allonger le temps de chargement d’un site est d’utiliser javascript, et plus précisément jQuery :

Charger des polices Google Fonts avec jQuery

Charger des polices depuis un dossier grâce à jQuery

Dans le cas où vos fichiers de vos fonts sont dans un dossier sur votre propre serveur, nous allons utiliser la propriété CSS @font-face ajouté au code HTML via jQuery.

Dernière mise à jour le Auteur : Thomas Dufranne

Repondre

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.