Unable to get fonts to load?

[charlie-ablett]

Hi, I'm using es6 and webpack, and I'm not terribly experienced with either. I followed your directions but when I put in to the jsx:

<span className="fa fa-question"/>

I just get a box. I take this to mean the font isn't loading. Both production and development.

Loaders in webpack.config.js:

{ test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint'] },

{ test: /\.json$/, loader: 'json'},

{ test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?name="[name]-[hash].[ext]"'},

{ test: /\.(scss)$/, loaders: ["style", "css", "sass"] },

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },

{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

(the third line is loaders for some other custom fonts, which works fine)

In index.js:

import "font-awesome-sass-loader";

There is no error, in console nor in the npm build terminal. The fonts are there if I build for production, but doesn't seem to pick them up (the box appears instead of the icon). Can you tell me what I'm doing wrong?

[sebastianhaas]

Same here, console output says OTS parsing error: invalid version tag in Chrome.

[sebastianhaas]

I just found out I had another loader config messing this up. I had something like

        {
          test: /\.woff(2)?(\?v=.+)?$/,
          use: 'url-loader?limit=10000&mimetype=application/font-woff'
        },
        {
          test: /\.(ttf|eot|svg)(\?v=.+)?$/,
          use: 'file-loader'
        },

in my webpack config before the recommended

        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

It works fine now, sorry.

[francisbesset]

The problem already exists with webpack2 and this package with v2 ?

[unikitty37]

With a default Rails 5.1 install with webpack enabled, config/loaders/app.js has a line

 test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,

which causes this problem until the |woff|woff2 is removed from the end of the line. It doesn't look like @charlie-ablett is using Rails, but it might be worth noting in the README for Rails users…