Using Imports
This is the suggested option. It ensures your fonts fo though the build pipeline, get hashes during comilation so that browser caching works correctly, and that you get comilation errors if the files are missing.
As described in "Adding Images, Fonts, and Files", you need to have a CSS file imported from JS. For example, by defaultsrc/index.js
imports src/index.css
A CSS file like this foes through the build pipeline, and can reference fonts and images. For example, if you put a font insrc/fonts/MyFont.woff
, yourindex.css
might include this:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}
Notice how we're using a reative path starting with ./
. This is a special notation that helps the build pipeline (powered by Webpack) discover this file.
Normally this should be enough.
참고 : How to add fonts to create-react-app based projects?