How to add fonts like js or css?

[Groxot]

How to add fonts from package like js or css?

[stephenplusplus]

There isn't support for this now. Can you throw some example code together of how you would like it to work?

[Groxot]

I use gulp wiredep like postinstall bower script

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;
  gulp.src('./index.html')
    .pipe(wiredep({
    }))
    .pipe(gulp.dest('./'));
});

And in index.html

 <!-- bower:css -->
 <!-- endbower -->

 <!-- bower:fonts -->
 <!-- endbower -->

 <!-- bower:js -->
 <!-- endbower -->

[al-the-x]

This would definitely be useful for packages like Bootstrap (not the Sass or Less versions) that ship with icon fonts with multiple extentions. Do you expect it to generate the @font-face definition for you, though?

[instantaphex]

This would be really helpful for me. I'm using grunt-wiredep and I'm getting my js dependencies and css dependencies like this:

var css = require('wiredep')().css; var js = require('wiredep')().js;

it would be nice to be able to do this:

var fonts = require('wiredep')().fonts

which would return an array of paths to the font files that I could copy over to the fonts/ dir for my build.

It's so nice to be able to dynamically grab all of my javascript and css dependencies so easily that it's kind of a downer when I have to configure another copy task and hard code paths for font awesome and bootstrap :/

[Botffy]

@instantaphex You don't have to hardcode the font paths. The fonts are pretty easy to extract from the "main" array the packages define:

var fontExts = ['eot', 'svg', 'ttf', 'woff', 'woff2'];
var deps = wiredep().packages;
var fonts = []
for(var i in deps) {
    for(var k in deps[i].main) {
        var f = deps[i].main[k];
        if(~fontExts.indexOf(f.split('.').pop())) {
            fonts.push(f);
        }
    }
}

[al-the-x]

Well, that's most of the way to a PR... thanks, @botffy! Any interest from the maintainer(s)?

[instantaphex]

@Botffy Thanks a lot. That worked perfectly.

[eddiemonge]

Fonts are tricky since they usually require supporting css and are defined where they are in that file. If its a simple font include without a font face definition though then thats different.