Gatsby.js: загрузка шрифтов Google для тем оформления без блокировки рендеринга

Question

Gatsby.js: загрузка шрифтов Google для тем оформления без блокировки рендеринга

Я использую Gatsby.js и его плагин Typography с темой Irving.

Эта тема требует использования Google Fonts "Exo" и "Yrsa" и добавляет импорт в <head> раздел экспортируемых статических html-файлов:

<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>

Этот импорт является контентом, блокирующим рендеринг, и я бы предпочел его избегать, если это возможно, как для пользователей, так и для моей оценки Google PageSpeed Insights.

Я попытался использовать https://github.com/didierfranc/gatsby-plugin-google-fonts и добавил следующее в свой gatsby-config.js:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Exo\:700`,
      `Yrsa\:400,700`,
    ],
  }
},

Однако это просто добавляет второй вызов импорта. Должен ли я поместить их в статический каталог? Даже тогда, как я могу настроить типографику так, чтобы она по-прежнему использовала эти шрифты, не импортируя их отдельно?

10

gatsby typography google-pagespeed google-font-api render-blocking

Источник

user1179207 22 янв '18 в 18:06

1 ответ

Другие вопросы по тегам gatsby typography google-pagespeed google-font-api render-blocking

user1515697 12 окт '18 в 19:47 2018-10-12 19:47 · Answer 1 · 2018-10-12 19:47

Вы могли бы получить лучшие результаты с font-display:swap, К сожалению, размещенные в Google шрифты пока не поддерживают эту функцию, поэтому вместо этого я решил самостоятельно размещать свои шрифты, используя typeface-* Пакет npm, созданный Кайлом, который также занимается Gatsby.

Это также помогает вашему приложению работать лучше без подключения к Интернету, так как вы используете Gatsby и можете добавить автономный плагин. В некоторых странах даже может быть отключен Google.

Если вы также используете плагин для типографики, вот пример кода конфигурации, извлеченного из Qards:

import Typography from "typography";

let bodyFontFamily = ["Roboto", "Helvetica", "Arial", "sans-serif"];
let headerFontFamily = bodyFontFamily;

const typography = new Typography({
    baseFontSize    : "16px",
    baseLineHeight  : 1,
    omitGoogleFont  : true,
    headerFontFamily: headerFontFamily,
    bodyFontFamily  : bodyFontFamily
});

export default typography;

Гэтсби-browser.js:

exports.onInitialClientRender = () => {
  require("typeface-roboto");
};