Search code examples
csscreate-react-appopentype

Create React App: Failed to decode downloaded font | OTS parsing error

I've added my fonts as such:

@font-face {
  font-family: "NHaasGroteskDSProMedium";
  src: url(/fonts/NHaasGroteskDSProM.otf);
}
@font-face {
  font-family: "NHaasGroteskDSProBold";
  src: url(/fonts/NHaasGroteskDSProB.otf);
}

The folder is well located, as you can see here:

enter image description here

I keep having this error:

Failed to decode downloaded font: http://localhost:3000/fonts/NHaasGroteskDSProM.otf
OTS parsing error: invalid sfntVersion: 1008813135

I'm therefore not able to display the correct fonts when the npm start launches.

Solution

  • Files in the src folder are not directly served by your server. These files are bundled together with the build process first, and any files that are not imported will not end up in the build.

    For these types of files, you can place them in the public folder, and the will end up in the build untouched and can be served by your server.

    For more info see the CRA page on the public folder