---
title: "Performance de site et polices de caractères personnalisées"
id: "291319"
type: "post"
slug: "optimiser-site-charger-polices-jquery"
published_at: "2021-01-14T10:41:39+00:00"
modified_at: "2023-01-26T18:18:13+00:00"
url: "https://www.mistersize.com/blog/optimiser-site-charger-polices-jquery/"
markdown_url: "https://www.mistersize.com/blog/optimiser-site-charger-polices-jquery.md"
excerpt: "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."
taxonomy_category:
  - "Blog"
taxonomy_post_tag:
  - "Javascript"
  - "jQuery"
  - "Optimiser"
---

[j'aime](#partage)
[Commenter](#comments-list)
Taggué dans : [Javascript](https://www.mistersize.com/tag/javascript/)
, [jQuery](https://www.mistersize.com/tag/jquery/)
, [Optimiser](https://www.mistersize.com/tag/optimiser-site-internet/)

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](https://www.mistersize.com/blog/mobile-first-progressive-enhancement/)
 *(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](https://developers.google.com/speed/pagespeed/insights/)
 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 );
```