How to use browserify with fonts

Question

So browserify doing everything via JavaScript at runtime, even CSS stuff. But how I can handle fonts, like font-awesome with npm and browserify.

A npm pacakge does exist here: https://www.npmjs.org/package/font-awesome But how can I bundle the fonts for my browser without using another tool like grunt or gulp.

// edit

If I want to use now a fa class in my html, is there another way than pointing to the node_modules/font-awesome/css/font-awesome.css in my html file?

I'm searching a automated solution, because if I have several libraries like font-awesome and they bring their own assets like fonts, images and other files, I don't want to point to every asset file by hand in my html file.

With jade I can just serve some files in public. And public contains all the assets which come via my remote dependencies, like fonts, images, ... But how to copy or symlink all the files from the particular node_modules to the public automatically?

Answer 1

I know one easy way to do that. Use your fonts in Base64 format. That way the Font data is resting within the CSS itself, not in external files.

Then just load your CSS into Browserify your usual way (with modules such as "insert-css" or "cssy". I use "stylify" because I use Stylus) and as it pipes the CSS definitions, it will also carry the font data itself.

Compressing your Base64 code beforehand is also a good idea. Or maybe let Uglify do the compressing in the end. Compare results.

Do double-check your target browsers support for Base64 fonts.