How do I add custom fonts to a Create-React-App project?

Adding Fonts to Create-React-App Projects

By Using Imports

This recommended method incorporates fonts into the build pipeline. To achieve this:

• Import a CSS file from JS (e.g., import './index.css').
• Reference fonts within the CSS file using relative paths starting with ./ (e.g., @font-face { src: local('MyFont'), url(./fonts/MyFont.woff) }).

By Utilizing the Public Folder

As an alternative, you can manually manage fonts in the public folder:

• Place fonts in a location within the public folder (e.g., public/fonts/MyFont.woff).
• Add a to the CSS file from public/index.html (e.g., ).
• Use the regular CSS notation to reference fonts within the CSS file, considering relative paths (e.g., @font-face { src: local('MyFont'), url(fonts/MyFont.woff) }).

Recommendation

Opt for the "Using Imports" method for the following benefits:

• Build pipeline integration
• Hashing for browser caching
• Compilation errors for missing files

The above is the detailed content of How do I add custom fonts to a Create-React-App project?. For more information, please follow other related articles on the PHP Chinese website!