React-Google-Fontsを使ってCreate-React-Appプロジェクトにフォントを追加する方法

2024-04-02

Create-React-Appプロジェクトにフォントを追加するにはいくつかの方法があります。ここでは、最も一般的な方法であるWebフォントとローカルフォントの2つを紹介します。

Webフォントは、Google Fontsなどのサービスから提供される、インターネット経由で読み込むことができるフォントです。この方法のメリットは、ファイルサイズが小さく、簡単に導入できることです。

手順

Google Fontsなどのサービスで好きなフォントを選びます。
フォントのCSSコードをコピーします。
Create-React-Appプロジェクトのpublic/index.htmlファイルを開きます。
<head>タグ内に、コピーしたCSSコードを貼り付けます。
プロジェクトのCSSファイルで、追加したフォントを指定します。

例

Google Fontsから「Noto Sans」フォントを追加する場合

Google Fontsにアクセスし、「Noto Sans」を検索します。 2.「Select this style」をクリックします。 3.「@import」のCSSコードをコピーします。
プロジェクトのApp.cssファイルで、以下のコードを追加します。

body {
  font-family: 'Noto Sans', sans-serif;
}

ローカルフォントは、自分のコンピュータに保存されているフォントです。この方法のメリットは、Webフォントよりも多くのフォントを選択できることです。

好きなフォントファイルをダウンロードします。
Create-React-Appプロジェクトのpublic/fontsディレクトリに、ダウンロードしたフォントファイルをコピーします。

NotoSans-Regular.ttfというフォントファイルをローカルに保存する場合

ダウンロードしたファイルをpublic/fontsディレクトリにコピーします。

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.ttf');
}

body {
  font-family: 'Noto Sans', sans-serif;
}

注意事項

Webフォントを使用する場合は、フォントファイルの著作権を確認する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create React App</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap">
</head>
<body>
  <div id="root"></div>
</body>
</html>

body {
  font-family: 'Noto Sans', sans-serif;
}

ローカルフォント

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.ttf');
}

body {
  font-family: 'Noto Sans', sans-serif;
}

補足

上記は基本的なサンプルコードです。実際のプロジェクトでは、必要に応じてコードを編集してください。

フォントアイコン

Font Awesomeなどのサービスから提供される、アイコンフォントを使用する方法です。アイコンフォントは、Webフォントの一種ですが、文字だけでなくアイコンも表示することができます。

Font Awesomeなどのサービスで好きなアイコンを選びます。
コードを貼り付け、アイコンを表示します。

Font Awesomeから「fa-home」アイコンを追加する場合

以下のコードを追加します。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <i className="fas fa-home"></i>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

ライブラリ

React-Google-Fontsなどのライブラリを使用する方法です。ライブラリを使用すると、Webフォントの読み込みや設定を簡単に済ませることができます。

ライブラリをインストールします。

npm install react-google-fonts

App.jsファイルで、ライブラリを使用します。

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleFontLoader from 'react-google-fonts';

const App = () => {
  return (
    <div>
      <GoogleFontLoader
        fonts={[
          {
            family: 'Noto Sans',
            weights: [400, 700],
          },
        ]}
      />
      <h1>Hello, world!</h1>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);