React.jsでGoogleフォントを使う：WebフォントをReactプロジェクトに追加する方法

2024-04-02

React.jsでGoogleフォントを使用する方法

前提条件

Node.js
Yarnまたはnpm

手順

新しいReactプロジェクトを作成

npx create-react-app my-app

Google Fonts APIを使用する

"Select this style" をクリックし、 "Embed" タブを選択します。
"Web" タブを選択し、 "CSS" を選択します。
コードをコピーします。

コードをReactプロジェクトに追加

App.css ファイルを作成します。
コピーしたコードを App.css ファイルに貼り付けます。
フォントを使用するコンポーネントのスタイルシートに App.css をインポートします。

例:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

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

アプリケーションを起動します。

yarn start

Webpackを使用している場合は、@import ルールを解決するためにいくつかの追加手順が必要です。

webpack.config.js ファイルに以下のモジュールをインストールします。

npm install --save-dev css-loader style-loader

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

yarn start

このチュートリアルでは、React.jsでGoogleフォントを使用する方法について説明しました。これらの手順に従うことで、自分のReactプロジェクトに簡単にGoogleフォントを追加することができます。

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

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

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

このコードは、<h1> タグと <p> タグにデフォルトのフォントを使用します。

Googleフォントを使用するには、以下のコードのように App.css ファイルにフォントファミリーを指定する必要があります。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

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

このコードは、Google FontsのRobotoフォントをインポートし、body 要素のフォントファミリーとして設定します。

アプリケーションを起動すると、<h1> タグと <p> タグがRobotoフォントで表示されます。

特定のコンポーネントにのみGoogleフォントを使用するには、そのコンポーネントのスタイルシートにフォントファミリーを指定します。
Googleフォントのさまざまなスタイルを使用するには、font-weight や font-style などのプロパティを使用します。

React.jsでGoogleフォントを使用する他の方法

@fontsource ライブラリを使用する

使用方法:

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

npm install --save-dev @fontsource/roboto

import React from 'react';
import ReactDOM from 'react-dom';
import { Roboto } from '@fontsource/roboto';

const App = () => {
  return (
    <div>
      <Roboto>
        <h1>Hello, world!</h1>
        <p>This is a paragraph.</p>
      </Roboto>
    </div>
  );
};

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

このコードは、Roboto コンポーネントを使用して、<h1> タグと <p> タグにRobotoフォントを適用します。

CSS Fonts Moduleは、WebフォントをCSSだけで簡単に使用できるようにする新しいCSS標準です。

@font-face ルールを使用して、GoogleフォントのCSSファイルにリンクします。

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
}

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