Загрузите Google Font с помощью <link> асинхронно или отложенных без Font Face Observer

Я хочу использовать шрифт Google "Noto Serif" для моего сайта. Моя проблема в том, что когда я тестирую его с помощью Google PageSpeed ​​Insights, он говорит мне, что я совершенен, за исключением одного:

<link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Noto+Serif'; return false;" rel="stylesheet">

На вашей странице есть 1 блокировка ресурсов CSS. Это вызывает задержку в рендеринг вашей страницы. Ни одно из вышеперечисленного содержимого на вашей странице может быть оказана без ожидания загрузки следующих ресурсов. Попытайтесь отложить или асинхронно загрузить блокирующие ресурсы или вставить критические части этих ресурсов непосредственно в HTML.

Я знаю плохое решение для этого. Чтобы связать шрифт с помощью <script> в нижней части HTML файла. Проблема с этим решением заключается в том, что каждый раз, когда вы нажимаете на что-то на своем веб-сайте, вы вызываете Flash-текст с непрозрачным текстом.

Я использую jekyll, размещенную на страницах GitHub, поэтому я не думаю, что смогу установить Font Face Observer: (

ОТВЕТЫ

Ответ 1

Здесь ya go, включите это в тег body, а не тег заголовка

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>

Ответ 2

Вы можете загружать веб-шрифты асинхронно с помощью этого скрипта:

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

Вам понадобится эта библиотека, ее довольно легко реализовать. Я узнал об этом из курса, который я недавно изучал, "Основы адаптивного веб-дизайна". Если вам интересно, вы можете проверить его здесь.