Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add fonts like js or css? #200

Open
Groxot opened this issue Jul 2, 2015 · 8 comments
Open

How to add fonts like js or css? #200

Groxot opened this issue Jul 2, 2015 · 8 comments

Comments

@Groxot
Copy link

Groxot commented Jul 2, 2015

How to add fonts from package like js or css?

@stephenplusplus
Copy link
Member

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

@Groxot
Copy link
Author

Groxot commented Jul 6, 2015

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
Copy link
Contributor

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
Copy link

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
Copy link

Botffy commented Nov 12, 2015

@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
Copy link
Contributor

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

@instantaphex
Copy link

@Botffy Thanks a lot. That worked perfectly.

@eddiemonge
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants