Should I be using webpack with fonts?

Question

I'm using webpack as my build tool, and my UI uses Bootstraps free Glyphicons. I'm currently bundling my fonts (the glyphicons) using url-loader, bundling woff, woff2, eot, ttf and svg. But is this the right thing to do?

My understanding is that if you specify woff, woff2, eot, ttf and svg fonts in your CSS, the browser will decide which one it best suited for, and download that - and not download the rest. But bundling the fonts through webpack surely means that every browser (and device, platform) get's every font.

Should I be bundling my fonts, or is there a better way to do it so that I can still use webpack, but have the browser download and use only the font that is right for it?

Answer 1

You should just use file-loader for these, instead of url-loader. Browsers will have to do an extra request, but that's usually not a huge problem.

Also consider only using woff2 and woff (in that order). Woff is most likely supported in all browsers you need, and woff2 is just a nice bonus on top of it. eot, ttf and svg aren't that useful anymore.

If you really want to inline the font, just inline woff only. It's not that much larger than woff2 and as mentioned above, will work pretty much everywhere. But remember that every CSS change will cause the font to be downloaded again, while with file-loader the URL wouldn't change, which means it'd just be served from the browser cache for returning visitors.