Webpack can't parse fontello fonts

Question

I'm using a custom icon font, made with fontello. When trying to use this in webpack, I get the following error:

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default-
frontend-setup/ida-ida-default-frontend-setup-
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)

And it does this for woff(2), ttf, svg... all of them. I've used several solutions found on SOF, but none of them seem to work.

This is my webpack.config.js:

module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            { test: /\.css$/, loader: "style!css!" },
        { test: /\.scss$/, loader: "style!css!sass!" },


        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},


    ]
}

Anyone got any ideas on this one?

Thanks!

Regards

Mario

Answer 1

protip: don't use font formats that no longer exists, so no eot or svg fonts, and since WOFF is literally a byte-for-byte wrapper around ttf/otf, no ttf/otf if you already have WOFF. That solves one problem: complexity.

Now, with that single font format: don't bundle this in. Don't bundle static assets into a javascript bundle, let the browser load them, with proper caching, 304 load prevention, etc. Bundling them in means you're wasting tons of bandwidth every time someone loads your bundle for data that never changed. Did you change some code, but your static assets stayed the same? Good news, your bundle is now going to get redownloaded in its entirety. That wastes your user's time, your bandwidth, and potentially, your very real dollars because of hosting costs.

Keep your static assets out of your bundle, make the font a normal CSS @font-face rule. It'll be fine, it'll load fine, it'll cache, and subsequent loads will be that much faster and not need to hit your server to retransfer the font file.