GatsbyでHP作成その8：Googleフォントを使ってみる

2022-03-22

Gatsby Starter Blogのフォントがかなり個性的で日本語に合わない感じだったので、Googleフォントに変更してみました。

Googleフォント

こちらを参考にします。

導入

yarn add @fontsource/noto-sans-jp

適用

gatsby-browser.jsに、フォントの読み込み部分を記載します。

import "@fontsource/noto-sans-jp"

src/style.cssを修正します。

/*  --fontFamily-sans: Montserrat, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fontFamily-serif: "Merriweather", "Georgia", Cambria, "Times New Roman",
    Times, serif;
  --font-body: var(--fontFamily-serif);
  --font-heading: var(--fontFamily-sans);
*/
  --fontFamily: 'Noto Sans JP', sans-serif;
  --font-body: var(--fontFamily);
  --font-heading: var(--fontFamily);

これで普通の日本語表示になりました。