Как добавить шрифты Google на сайт gatsby

Начало работы с Gatsby - когда я добавляю тег ссылки в public/index.html с помощью шрифта google, он работает в режиме разработки. Когда я создаю сайт, index.html получает reset. Итак, я думаю, есть еще один правильный способ добавить шрифт?

ОТВЕТЫ

Ответ 1

Добавьте следующее в начало src/layouts/index.css, например, чтобы импортировать шрифт "Roboto" Google

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  font-family: 'Roboto', sans-serif;
}

Затем это будет обрабатываться процессом сборки gatsby и включено в окончательную производственную версию сайта.

Ответ 2

Вы также можете использовать реактивный шлем, который обсуждается в руководстве по gatsby.

Включите элемент ссылки на шрифты Google в компоненте шлема.

Вот так:

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</Helmet>

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

Ответ 3

У меня сложилось впечатление, что шрифты - это путь. Никаких дополнительных (блокирующих) сетевых запросов.

Пока вы можете найти свой шрифт typeface- на NPM

Ответ 4

Вы также можете использовать typography.js, как они ссылаются в документах:

https://www.gatsbyjs.org/tutorial/part-two/#typographyjs

Ниже приведена версия github, в которой перечислены все имеющиеся в них комбинации шрифтов.

Ответ 5

Вы можете предварительно выбрать шрифты с помощью этого плагина https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts Таким образом, на этапе сборки плагин будет извлекать ваши шрифты и сохранять их локально, чтобы вы могли обслуживать их из своего сервер или CDN.

Ответ 6

Согласно документам Gatsby (реагировать), gatsby-plugin-offline может запретить запрашивать шрифты Google на сервере, если они не заканчиваются на .css. Я использовал Typography и в итоге импортировал один шрифт из CDN, но позже увидел здесь эту опцию, чтобы передать gatsby-config для переопределения плагина по умолчанию.

Ответ 7

Вы также можете разместить шрифты самостоятельно. Просто

В этом примере src-папка должна выглядеть так:

/src/
     /styles/style.scss
     /fonts/roboto-v18-latin-regular.eot
     /fonts/roboto-v18-latin-regular.woff2
     /fonts/roboto-v18-latin-regular.woff
     /fonts/roboto-v18-latin-regular.ttf
     /fonts/roboto-v18-latin-regular.svg

* у вас должен быть плагин, как использовать scss: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass