How to properly include fonts in ReactJs?

Question

css

0

Tell me, please, where is it better to add fonts: in src or public? Is there any difference in this? And how to connect them to the project? I just started learning React, I'm trying to create my own spa and I can't figure out how to properly include fonts. I will be grateful for help)

Answer 1

For example, you want the font Source Sans Pro . Install @fontsource/source-sans-pro package . In a file main.jsor main.tsimport it: or if you need a specific range of unicode characters:
import '@fontsource/source-sans-pro';
import '@fontsource/source-sans-pro/cyrillic.css';

Answer 2

Fonts must be included in index.html, which is in the project. And you can place them anywhere, even in the public folder, even just connect with cdn. In .jsx, .tsx files, you do not need to include fonts, this can lead to flickering when updating some components or a page.