React-redux-universal-hot-example: When including a font in scss file it works, but I get an error in chrome console.

[skywickenden]

If I place some fonts files in /static/icon-fonts/... and include the following in app.scss

@font-face {
    font-family: 'socialIcons';
    src: url('/icon-fonts/socicon-1.3/socicon.eot');
    src: url('/icon-fonts/socicon-1.3/socicon.eot?#iefix') format('embedded-opentype'),
         url('/icon-fonts/socicon-1.3/socicon.woff') format('woff'),
         url('/icon-fonts/socicon-1.3/socicon.ttf') format('truetype'),
         url('/icon-fonts/socicon-1.3/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The font works but I get errors in the chrome console.

Failed to decode downloaded font: http://localhost:3000/
(index):1 OTS parsing error: invalid version tag

I've tried multiple fonts, so it is not a problem with the file.

I found this stackoverflow post. But the webpack config already is including the host and port.

Any ideas?

[skywickenden]

Well I now know a lot more about webpack than I did before...

I solved this by using resolve-url-loader to convert the urls for the fonts into a relative form that webpack could find.

npm i --save resolve-url-loader

Then I created a fonts folder in the same directory as app.scss and referenced them as:

@font-face {
    font-family: 'socialIcons';
    src: url('fonts/socicon.eot');
    .....
}

Finally I changed the following line in /webpack/dev.config

  { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },

to be (I added !resolve-url before !sass)

      { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!resolve-url!sass?outputStyle=expanded&sourceMap' },

and the following line in /webpack/prod.config

      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },

to be:

  { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!resolve-url!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },

[jd327]

Thanks for this update. Very helpful :+1:

[fabienheureux]

Saved me the afternoon. Thanks a lot @skywickenden

[guymorita]

@skywickenden thanks a million