Gatsbyにカスタムフォントを追加する方法

投稿日: 2022-04-20 2022-04-20
タグ: GatsbyJS

序章

適切なフォントを選択すると、サイトに大きな価値をもたらし、ユーザーエクスペリエンスを向上させることができます。ただし、適切なフォントの読み込み戦略は、やや難しい場合があります。そのため、Gatsbyは、フォントの読み込みに関するすべてのニーズに対応する、開発者向けのソリューションをいくつか提供しています。

この記事では、フォントをプロジェクトにロードするための3つの異なるアプローチ（Typography.js、Fontsource、およびセルフホストファイルの手動管理）を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成方法に従って実行できます。
このチュートリアルでは、既存のGatsbyプロジェクトからビルドすることを想定しています。最初のGatsbyWebサイトのセットアップ方法で作成されたGatsbyは、この要件を満たしています。

このチュートリアルは、ノードv15.13.0、npm v7.8.0、gatsby v3.2.1、およびreactv17.0.1で検証されました。

Typography、jsセクションは、gatsby-plugin-typography v3.2.0、react-typography v0.16.19、typography v0.16.19、およびtypography-theme-lawtonv0.16.19で検証されました。 Fontsourceセクションは、@fontsource/rubikv4.2.2で検証されました。

Typography.jsの使用

Typography.js は、プロジェクトのWebフォントをロードおよび構成するためのツールキットです。

gatsby-plugin-typographyには、typographyとreact-typographyのピア依存関係も含める必要があります。

ターミナルウィンドウを開き、プロジェクトディレクトリに移動して、次のコマンドを実行します。

npm install typography react-typography gatsby-plugin-typography

注：改訂時に、最新バージョンのReact、gatsby-plugin-typography、およびreact-typographyとの依存関係ツリーの競合がありました。

--legacy-peer-depsフラグを使用して、このエラーを回避することができます。

次に、コードエディタでgatsby-config.jsファイルを開き、次の新しいコード行を追加します。

gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-typography",
      options: {
        pathToConfigModule: "src/utils/typography.js"
      }
    }
  ]
};

gatsby-plugin-typographyは、次の2つのオプションをサポートしています。

pathToConfigModule：これは構成パスです。
omitGoogleFont：標準のCDNからGoogleフォントをリクエストするヘルパー関数。 trueに設定されている場合は、別のCDN構成を使用できます。

次に、pathToConfigModuleオプションで指定されたtypography.js構成ファイルが必要になります。このファイルは、Webフォントやテーマ、および追加の基本スタイルを設定する場所です。

Playfair Display、Roboto、およびいくつかの基本フォントサイズを追加しましょう。

src / utils / typography.js

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.45,
  googleFonts: [
    {
      name: "Playfair Display",
      styles: ["800"],
    },
    {
      name: "Roboto",
      styles: ["400"]
    }
  ],
  headerFontFamily: ["Playfair Display", "serif"],
  bodyFontFamily: ["Roboto", "sans-serif"]
});

typography.injectStyles();

export default typography;

変更を保存して、Gatsbyプロジェクトの新しいフォントを表示します。

注：スターターにスタイルが含まれている場合、gatsby-plugin-typographyで設定されたスタイルが上書きされる可能性があります。

Typography.jsは、事前定義されたテーマもサポートしています。

見出しにRalewayを使用し、本文にLibre Baskervilleを使用するLawtonテーマの例を考えてみましょう。

ターミナルウィンドウを開き、次のコマンドを実行します。

npm install typography-theme-lawton

事前定義されたテーマの使用例を次に示します。

src / utils / typography.js

import Typography from "typography";
import theme from "typography-theme-lawton";

const typography = new Typography(theme);

export default typography;

事前定義されたテーマをoverrideThemeStylesでオーバーライドする例を次に示します。

src / utils / typography.js

import Typography from "typography";
import theme from "typography-theme-lawton";

theme.overrideThemeStyles = () => ({
  a: {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  },

  "a:hover": {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  }
});

const typography = new Typography(theme);

export default typography;

たくさんのテーマを使用でき、いくつかの構成オプションを使用して、サイトに適切なセットアップを行うことができます。

これで、GatsbyプロジェクトがTypography.jsをサポートします。

Fontsourceの使用

Fontsource は、セルフホストのオープンソースフォント用のツールキットです。セルフホスティングには、CDNでホストされるフォントと比較して読み込み時間が短いという一般的な利点があります。

注：以前、この記事では書体を推奨していました。その後、このライブラリは非推奨になりました。

Rubikフォントの例を考えてみましょう。

ターミナルウィンドウを開き、次のコマンドを実行します。

npm install @fontsource/rubik

次に、Gatsbyのクライアント側と対話するgatsby-browser.jsファイルのフォントを要求します。

gatsby-browser.js

require("@fontsource/rubik");

次に、スタイルシートでフォントを呼び出すことができます。

src / styles / main.css

body {
  font: 400 18px Rubik, sans-serif;
}

注：グローバルスタイルを使用するには、gatsby-browser.jsにインポート行を追加する必要があります。

gatsby-browser.js

import "./src/styles/main.css"

またはスタイル付きコンポーネント：

src / components / layout.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    font: 400 18px Rubik, sans-serif;
  }
`

const Layout = ({ children, location }) => (
  // ...
  <GlobalStyles />
  <Main>{children}</Main>
  // ...
);

export default Layout;

これで、GatsbyプロジェクトがFontsourceをサポートします。

セルフホストファイルを手動で管理する

Fontsourceはセルフホスティングソリューションであり、必要なファイルを提供します。ただし、セットアップをより細かく制御したい場合があります。 CSSフォント読み込みAPIをもっと活用したいと思うかもしれません。または、 ZachLeathermanのフォント読み込み戦略を試してみてください。どちらの場合でも、他のWebサイトで通常行うように、いつでもGatsbyサイトにフォントを追加できます。

前のRubikの例を維持して、フォントファイルとスタイルシート用のディレクトリを作成できます。

|-- /static
    |-- /fonts
        |-- Rubik-Regular.woff
        |-- Rubik-Regular.woff2
        |-- Rubik-Italic.woff
        |-- Rubik-Italic.woff2
        |-- Rubik-Bold.woff
        |-- Rubik-Bold.woff2
        |-- fonts.css

次に、gatsby-source-filesystemプラグインを使用してディレクトリを入手できます。

gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "fonts",
        path: `${__dirname}/static/fonts/`
      }
    }
  ]
};

また、スタイルシートでは、 @font-faceルールを使用してフォントをロードできます。

src / fonts / fonts.css

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: normal;
  src: url("Rubik.woff2") format("woff2"), url("Rubik.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: italic;
  src: url("Rubik-Italic.woff2") format("woff2"), url("Rubik-Italic.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 700;
  font-style: normal;
  src: url("Rubik-Bold.woff2") format("woff2"), url("Rubik-Bold.woff") format("woff");
  font-display: swap;
}

これで、前のFontsourceの例で行ったのと同じ方法で、スタイルシートまたはstyled-componentを介してフォントを呼び出すことができます。

結論

この記事では、フォントをプロジェクトにロードするための3つの異なるアプローチ、Typography.js、Fontsource、およびセルフホストファイルの手動管理について紹介しました。

ニーズに合った適切なソリューションを見つけることで、パフォーマンスとユーザーエクスペリエンスを大幅に向上させることができます。

GatsbyアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法で学習を続けてください。

getdocs

13036