在react webpack包中添加自定义字体

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

npm install file-loader --save-dev

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

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

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

const MyComponent = () => {
  return <div className="my-component">Hello, World!</div>;
};

export default MyComponent;