CODEWITHSUNDEEP
fontswebpackfontello
MarioVde
MarioVde

Reputation: 147

Webpack can't parse fontello fonts

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

Upvotes: 1

Views: 1971

Answers (2)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53558

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.

Upvotes: 3

dhirajbasukala
dhirajbasukala

Reputation: 171

Well, I was also having the same issue the other day and found a solution in less-loader issue list, it was due to the trailing "?234234234" in the font url,

Try this in webpack loader config:

test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/

hope if you're(or someone is) still having the issues it might help you/them. Original thread of solution in git

Upvotes: 1

Related Questions