在呈现页面之前，如何在react中加载字体？

@font-face {
  font-family: 'CustomFont';
  src: url('/path/to/font.ttf') format('truetype');
}

.custom-font {
  font-family: 'CustomFont', sans-serif;
}

import React from 'react';
import './styles.css';

const MyComponent = () => {
  return (
    <div className="custom-font">
      This text will be displayed with the custom font.
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { GoogleFont } from 'react-google-font-loader';

const MyComponent = () => {
  return (
    <>
      <GoogleFont href="https://fonts.googleapis.com/css2?family=CustomFont&display=swap" />
      <div style={{ fontFamily: 'CustomFont, sans-serif' }}>
        This text will be displayed with the custom font.
      </div>
    </>
  );
};

export default MyComponent;

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'fonts/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

import React from 'react';
import './styles.css';
import customFont from './fonts/CustomFont.ttf';

const MyComponent = () => {
  return (
    <div className="custom-font">
      This text will be displayed with the custom font.
    </div>
  );
};

export default MyComponent;