Всем привет!
При проверке скорости сайта 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&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>
<!---------------------->
Все работает быстро и асинхронно.
Всем добра и чтоб росла борода!))