Reactでgoogleフォントの読み込みをさせる

Reactでgoogleフォントの読み込みをさせる
- 方法 1: HTMLの
- 方法 2: JavaScriptで動的に読み込む

Google FontsをReactアプリケーションで読み込むための簡単な方法を紹介します。

方法 1: HTMLの

public/index.htmlファイルに以下のようにタグを追加します。
この方法は最も簡単です。

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

方法 2: JavaScriptで動的に読み込む

react-helmetライブラリを使用して、JavaScriptで動的にGoogle Fontsを読み込むこともできます。
以下の手順で進めます。

1. react-helmetをインストールします。

npm install react-helmet

または

yarn add react-helmet

2. React Helmetを使ってGoogle Fontsを読み込むコンポーネントを作成します。

import React from 'react';
import { Helmet } from 'react-helmet';

const FontLoader: React.FC = () => {
 return (
   <Helmet>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
     />
   </Helmet>
 );
};

export default FontLoader;

3. このコンポーネントをアプリケーションのトップレベルで使用します。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import FontLoader from './FontLoader';

ReactDOM.render(
 <React.StrictMode>
   <FontLoader />
   <App />
 </React.StrictMode>,
 document.getElementById('root')
);

これで、Google FontsがReactアプリケーションで読み込まれ、利用可能になります。
特定のページのみGoogle Fontsを使用する要件がなければ方法1で十分ですね。