Why can't I connect fonts in create-react-app?

Question

JavaScript

Hello!
The problem is this: I create a project through create-react-app, I put the fonts in src/fonts/, I write the following in App.css:

@font-face {
    font-family: 'Circe';
    src: url('./fonts/Circe-Regular.woff2') format('woff2'),
        url('./fonts/Circe-Regular.woff') format('woff'),
        url('./fonts/Circe-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

And in the console it gives: Module not found: Can't resolve './fonts/Circe-Regular.ttf' in 'F:\web-dev\in-process\react-test\
Tell me why webpack does not see this font? Thank you.

Answer 1

I do this: the fonts folder contains the fonts.css file, and this file is imported into App
import “./fonts/fonts.css”

Answer 2

the path to the font file is incorrect, you are already in the fonts directory