React.jsでGoogle Fontsを使う方法

React.js で Google Fonts を使用する

React.js で Google Fonts を使用するには、主に以下のステップを踏みます。

1. Google Fonts API からフォントを読み込む
   

   • Google Fonts API を使って、使用するフォントの URL を取得します。
   • 通常は、@import CSSルールを使用してスタイルシートにフォントをインポートします。

2. Webpack または他のバンドラーでフォントをバンドルする
   

   • Webpack などのバンドラーを使用して、フォントファイルをバンドルして最適化します。
   • バンドルされたフォントは、アプリケーションのビルドに含まれます。

コード例

// app.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import './styles.css'; // ここで Google Fonts のスタイルをインポート

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Ap   p />);

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

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

Webpackの設定

Webpackの設定ファイル（通常は webpack.config.js）で、フォントファイルの処理を指定します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },
};

重要なポイント

• フォントのライセンス
  使用するフォントのライセンスを確認し、適切に使用します。
• フォントの最適化
  Webpack の最適化オプションを使用して、フォントファイルを圧縮し、バンドルサイズを小さくします。
• フォントの読み込みタイミング
  Google Fonts API からフォントを読み込むタイミングを適切に設定し、フォントが完全に読み込まれる前にレンダリングされないようにします。

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

• display=swap は、フォントの読み込みが完了する前にデフォルトのフォントを使用するよう指示します。
• wght@400;700 は、フォントのウェイト（太さ）を指定しています。
• @import ルールを使用して、Google Fonts API から Roboto フォントを読み込みます。

Webpack でフォントをバンドルする

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },
};

• file-loader を使用して、フォントファイルをバンドルに含めます。
• Webpack の設定ファイルで、フォントファイルの処理を指定します。

React コンポーネントでフォントを使用する

// app.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import './styles.css'; // ここで Google Fonts のスタイルをインポート

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Ap   p />);

• React コンポーネント内で、フォントを使用する要素（例えば、h1）にスタイルを適用します。
• styles.css をインポートして、Google Fonts のスタイルを適用します。

CSS Modules

CSS Modules を使用することで、フォントのクラス名をスコープ化し、衝突を防止することができます。

// styles.module.css
.my-font {
  font-family: 'Roboto', sans-serif;
}

// app.js
import styles from './styles.module.css';

function App() {
  return (
    <div className={styles['my-font']}>
      <h1>Hello, world!</h1>
    </div>
  );
}

Styled Components

Styled Components を使用して、コンポーネントのスタイルを定義し、フォントを適用することができます。

import styled from 'styled-components';

const MyComponent = styled.div`
  font-family: 'Roboto', sans-serif;
`;

function App() {
  return (
    <MyComponent>
      <h1>Hello, world!</h1>
    </MyComponent>
  );
}

Font Awesome

Font Awesome は、アイコンフォントを提供するライブラリです。フォントを直接読み込む代わりに、Font Awesome のアイコンを使用することで、フォントの管理を簡素化することができます。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  re   turn (
    <FontAwesomeIcon icon={faCoffee} />
  );
}

ローカルフォントのインポート

フォントファイルをプロジェクトに直接インポートし、CSS で使用することができます。

// styles.css
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2'),
       url('./fonts/myfont.woff') format('woff');
}

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

フォントのプリロード

フォントの読み込みを高速化するために、link タグを使用してフォントをプリロードすることができます。

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style">