Create-react-app: Webpack: Failed to decode downloaded font: OTS parsing error: invalid version tag

[HugoGresse]

Description

Since v0.6.1, I'm having an issue with the font I'm using. I was on 0.2.1 before.

Failed to decode downloaded font:
OTS parsing error: invalid version tag

Expected behavior

The font should be loaded properly and displayed correctly.

Actual behavior

The font is not displayed and an empty rectangle appear in place of the font/icon

Environment

[email protected]
node v4.5.0
npm 2.15.9

Operating system: OSX 10.11.5 El Capitain
Browser and version: Chrome 53.0.2785.116 64b

Reproducible Demo

Font samples here : https://www.dropbox.com/sh/9gpxshq0t4x1j8n/AABuyhDqcMCQ3egSBa25Pdp3a?dl=0

[gaearon]

Can you provide a full project reproducing this please?

In the meantime you should be able to use the public folder as an escape hatch to handle fonts without Webpack. There is a section in the user guide on the public folder.

[HugoGresse]

I've finded the issue...

The fonts was located in public/fonts/ and css in public/css/. The font was loaded from the css with url(fonts/myfont.woff) so the font should have been placed in public/css/fonts. Stange about this issue though.

[gaearon]

Okay this makes sense. We serve index.html as fallback for unrecognised paths cause it usually makes sense in single page apps. So this is what you were getting instead of the font.

[HugoGresse]

thanks @gaearon loving create-react-app

[RainingNight]

@HugoGresse How to resolve?

[Dantiff]

Hello,
Sorry am late, but in case someone runs into a similar error in future.

I encountered the same issue, and after hours of blind trial and errors, this is how I solved the issue:

Foremost, the browser is unable to use the fonts due to poor formats. In this case, Fonts Squirrel comes in handy. Use the generator to to convert your uploaded standardized web fonts.

After downloading the standardized fonts, move the extracted fonts (*.oet, *.ttf, *.woff, *.woff2) to your public folder in the react app. This ensures that the fonts are available to the react server when the app loads during development and as well after build.

Use the @font-face rule included in the fontsquirrel extract to include the fonts in the .svg file.
You should have something close to this in your .svg file

`
/* FONTS*/
@font-face {
font-family: 'proxima_novathin';
src: url('journey-fonts/proxima_nova_thin-webfont.woff2') format('woff2'),
url('journey-fonts/proxima_nova_thin-webfont.woff') format('woff');
src: local('proxima_novathin'),
url('journey-fonts/proxima_nova_thin-webfont.woff2') format('woff2'),
url('journey-fonts/proxima_nova_thin-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_nova_rgregular';
src: url('journey-fonts/proxima_nova_regular-webfont.woff2') format('woff2'),
url('journey-fonts/proxima_nova_regular-webfont.woff') format('woff');
src: local('proxima_nova_rgregular'),
url('journey-fonts/proxima_nova_regular-webfont.woff2') format('woff2'),
url('journey-fonts/proxima_nova_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

`

And thats it!

[lualparedes]

My two cents:
I was able to solve the issue importing the fonts from the index.scss (.css) file in the src/ folder:

// In /src/index.scss
@font-face {
    font-family: 'hk_groteskregular';
    src: url('./assets/fonts/hk_grotesk/hkgrotesk-regular-webfont.woff2') format('woff2'),
         url('./assets/fonts/hk_grotesk/hkgrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

[magnattic-agency]

I encoded the font with base64 locally. I am using the Nucleo app to do that by way. And it works 👍

[fgiarritiello]

I'm getting the same error. Here is my code:

@font-face {
    font-family: 'Gotham';
    src: url('./assets/fonts/GothamSSm-Book.otf') format('opentype'),
        url('./assets/fonts/GothamSSm-Book.eot');
    font-weight: normal;
    font-style: normal;
  }

html {
    font-family: 'Gotham', Helvetica, Tahoma, sans-serif;
 }

any help will be very much appreciated

[henrylatham]

@fgiarritiello I found switching my font files from otf/ttf to woff solved my issue