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
(function( $ ){
/*
*
** Load fonts from Google
*
*/
// The function :
var loadCSS = function(href){
var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
$("body").append(cssLink);
};
$(window).on('load', function(){
$('body').addClass('js-fonts-loaded');
// Appeler la fonction :
loadCSS("https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap");
});
})( 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.
/*
*
** Load fonts from server
*
*/
(function( $ ){
// The function :
function custom_fonts(){
$("head").prepend("<style>" +
"@font-face {\n" +
"\tfont-family: \"Museo Sans 100\";\n" +
"\tsrc: url('fonts/museosans-100.ttf') format('truetype');\n" +
"}\n" +
"@font-face {\n" +
"\tfont-family: \"Museo Sans 300\";\n" +
"\tsrc: url('fonts/museosans-300.ttf') format('truetype');\n" +
"}\n" +
"@font-face {\n" +
"\tfont-family: \"Museo Sans 500\";\n" +
"\tsrc: url('fonts/museosans-500.ttf') format('truetype');\n" +
"}\n" +
"@font-face {\n" +
"\tfont-family: \"Museo Sans 700\";\n" +
"\tsrc: url('fonts/museosans-700.ttf') format('truetype');\n" +
"}\n" +
"@font-face {\n" +
"\tfont-family: \"Museo Sans 900\";\n" +
"\tsrc: url('fonts/museosans-900.ttf') format('truetype');\n" +
"}\n" +
"body.js-fonts-loaded{ font-family: 'Museo Sans 300', sans-serif }" +
"</style>");
}
$(window).load(function(){
$('body').addClass('js-fonts-loaded');
// Call the function :
custom_fonts();
});
})( jQuery );