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

(function( $ ){

/*
*
** Load fonts from Google
*
*/
	
	// The function :
    var loadCSS = function(href){
    var cssLink = $("");
        $("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("" + 
                                
            "@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 }" +
                
        "");
	}

	$(window).load(function(){

		$('body').addClass('js-fonts-loaded');

		// Call the function :
		custom_fonts();

	});

})( jQuery );
Dernière mise à jour le Auteur : Thomas Dufranne

Ce contenu vous a-t-il été utile ?

Merci pour votre avis !

Si vous pensez pouvoir aider d'autres personnes, pensez à partager le contenu

Merci pour votre avis !

Désolé que vous n'ayez pas trouvé votre réponse.

Je vous invite à me poser vos question par commentaire ou par e-mail !

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.