How to use a browser with fonts

Question

So review everything using JavaScript at runtime, even CSS. But how can I handle fonts like font-awesome with npm and a browser.

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

// edit

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

I am looking for an automatic solution, because if I have several libraries, such as font-awesome, and they bring their own resources, such as fonts, images and other files, I don’t want to manually point each asset file to an html file.

With jade, I can just serve some files in public . And public contains all the assets that come through my remote dependencies, such as fonts, images, ... But how to copy or merge all files from a specific node_modules with public automatically?

Answer 1

I know one easy way to do this. Use your Base64 fonts. Thus, the font data rests within the CSS itself, and not in external files.

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

Base64 compression in advance is also a good idea. Or maybe let Uglify do the compression at the end. Compare the results.

Do a double check of support for targeted browsers for Base64 fonts.