react-scripts 5.0.1 importing .ttf files warnings #13781

chojak · 2025-01-10T11:07:11Z

chojak
Jan 10, 2025

I'm posting it as a discussion; I'm not sure if that's an issue or not.

My project structure looks like this:
project/
├── public/
├── src/
│ ├── assets/
│ │ ├── fonts/
│ │ │ ├── NunitoSans-Regular.ttf
│ │ │ ├── NunitoSans-SemiBold.ttf
│ │ ├── png/
│ │ ├── svg/
│ ├── index.css
│ ├── index.tsx

In index.css I import fonts as @font-face

@font-face {
  font-family: 'NunitoSans-Regular';
  src: local('NunitoSans-Regular'), url(./assets/fonts/NunitoSans-Regular.ttf) format('truetype');
}

That causes warnings in devtools

localhost/:1 Failed to decode downloaded font: http://localhost:3000/fonts/NunitoSans-Regular.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135
localhost/:1 Failed to decode downloaded font: http://localhost:3000/fonts/NunitoSans-SemiBold.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

As mentioned there:

For future reference: A sfntVersion 1008813135 usually means that you are passing an HTML string instead of font data to the font parser. 1008813135 is 0x3c21444f in hexadecimal, which is <!DO in ASCII, which is the beginning of <!DOCTYPE html>.

This occurs if you try to load a font, but get HTML content instead (for example a fallback website or error page).

Originally posted by @waruyama in #29559

And that may be true, in Devtools/Application I can see these fonts loaded, but they are duplicated - one with a regular name and second with some (?) hex code. These with regular names actually contain intex.html, but others with hex code have actual font.

Moving /fonts directory into /public stops occurring these warnings. In Devtools/Application there are only fonts with correct name displaying actual fonts.
Placing it inside /public/assets/fonts makes warnings appear again.

I have no idea what may be the reason and how should I understand it. I will be much appreciated for any suggestions. Thank you.

ChrisUser · 2025-01-17T08:36:06Z

ChrisUser
Jan 17, 2025

Hi @chojak, files in the src folder are not directly served by your server.
It means that these files are bundled together with the build process first, and any files that are not imported will not end up in the build.

As for the fonts you should place them in the public folder and they will end up in the build automatically.

And then: "To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL."

For more info see the CRA page on the public folder

Hope this helps ✋

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

react-scripts 5.0.1 importing .ttf files warnings #13781

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

react-scripts 5.0.1 importing .ttf files warnings #13781

Uh oh!

chojak Jan 10, 2025

Replies: 1 comment

Uh oh!

ChrisUser Jan 17, 2025

chojak
Jan 10, 2025

ChrisUser
Jan 17, 2025