Правильная асинхронная загрузка шрифтов Google Fonts

Всем привет!

При проверке скорости сайта goolgle speed insight или gtmertrix нам говорят, что шрифты гугл блокируют содержимое страницы и их необходимо загрузить позже.

<link  href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Делаем все с помощью скрипта fonfaceobserver, который также загружаем асинхронно (весит всего 5 Кб в несжатом виде).

Качаем здесь: https://github.com/bramstein/fontfaceobserver/

Сам скрипт кладем например в папку /JS. Получится, что доступен он по ссылке «ваш сайт»/js/fontfaceobserver.js

Далее в header добавляем вместо ссылки на гугл шрифт (для начала просто закомментируйте его <!— —>)

<!--подключаем шрифт-->
<style>
@import url(//fonts.googleapis.com/css?family=Ваш шрифт и начертания);
/* шрифт по умолчанию, до тех пор пока не подгружен новый шрифт */.fonts-loaded {
body {
font-family: Ваш шрифт, sans-serif;
}
}

</style>

<script>
var script = document.createElement('script');

script.async = true;
script.src = 'путь_к_скрипту/fontfaceobserver.js';
script.onload = function () {
// инициализация
var font = new FontFaceObserver('Ваш шрифт');

font.load().then(function () {
document.documentElement.className += " fonts-loaded";
});
};
document.head.appendChild(script);
</script>;

<!---------------------->

Вот и все, вариант рабочий, есть немного другие решения, но хром ругается на ошибки в переменных.

Вот в качестве примера:

<!--подключаем шрифт-->
<style>
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700&amp;subset=cyrillic,latin);

/* шрифт по умолчанию, до тех пор пока не подгружен новый шрифт */.fonts-loaded {
body {
font-family: Open Sans, sans-serif;
}
}

</style>

<script>
var script = document.createElement('script');

script.async = true;
script.src = 'js/fontfaceobserver.js';
script.onload = function () {
// инициализация
var font = new FontFaceObserver('Open Sans');

font.load().then(function () {
document.documentElement.className += " fonts-loaded";
});
};
document.head.appendChild(script);
</script>

<!---------------------->

Все работает быстро и асинхронно.

Всем добра и чтоб росла борода!))

Поделиться ссылкой: