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

Mary-Kate Olsen
Release: 2024-11-06 02:50:02
Original
923 people have browsed it

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template