Adding open sans via FontFaceKit Bower isn't working with Gulp

brett · April 21, 2015, 1:41am

I’ve tried using Open Sans via the FontFaceKit bower package with bower install open-sans-fontface --save.

The bower package is correctly downloaded, and gulp seems to correctly copy the fonts all to the /dist/fonts folder as it should be, but the fonts aren’t being correctly included. My console on Chrome is showing “failed to load resource” on all of the fonts.

The problem appears to be that it is trying to load the fonts from the wrong directory. It’s trying to load them from /dist/styles/fonts/<style>/OpenSans-<style>.<format>, and not from the flat fonts directory as with other fonts.

I’m assuming this has something to do with the setup of the bower package. Might anyone happen to know what I need to modify to get these fonts to load correctly? To reproduce the error, just run the bower install open-sans-fontface --save and then run gulp watch and you should encounter the same issue.

Perhaps I need to set some kind of override within the bower.json or manifest.json files? Or maybe I need to create some kind of custom scss / css file to enqueue the fonts? The bower package includes a bunch of scss files as well as a css file that are trying to include the fonts, but they just aren’t working correctly.

edit

After looking through the scss files a bit more, it appears as though I’d probably be able to modify the overrides to manually include each of the scss files, and then overwrite the package’s variables.scss file to use the correct path, but shouldn’t this all be automated?

kalenjohnson · April 21, 2015, 3:14am

Preprocessor variables are there for this reason, to point the CSS to the correct font folder. So you can use your own folder structure.

brett · April 21, 2015, 3:31am

Unfortunately, I can’t use the variables alone to fix the issue (or I would have done so and wouldn’t have needed to make this post). I am able to set the “OpenSansPath” variable, but the subdirectory for font style (Bold, SemiBold, Italic etc) is hardcoded into the Open Sans Bower package’s SCSS stylesheet, specifically _mixins.scss.

I was able to resolve the issue by adding an override for the Open Sans Bower package and including each of the individual scss files within the package rather than including just the main open-sans.scss file, and then adding my own _mixins.scss file which redefines the Open Sans package’s “fontdef” mixin without the style subdirectories (so that it works with the flat font directory).

However, this still feels a bit clunky and leaves me wondering if there isn’t a better way to do things. For the moment, what I have works fine, but it just doesn’t feel quite right.

Out of curiosity, if you wouldn’t mind elaborating a bit more, is there some variable I’m missing that would allow me to get this working correctly with the flat font directory given the structure of the “fontdef” mixin and the fact that it has the style subdirectories hardcoded?

kalenjohnson · April 21, 2015, 3:55am

Not all bower packages are created equal. I haven’t used this particular one so I can’t give specific answers as to which variables to edit

austin · April 21, 2015, 4:50pm

If you want to preserve the directory structure feel free to remove

github.com

roots/sage/blob/5b9786b8ceecfe717db55666efe5bcf0c9e1801c/gulpfile.js#L181


});
return merged
  .pipe(writeToManifest('scripts'));
});


// ### Fonts
// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
// structure. See: https://github.com/armed/gulp-flatten
gulp.task('fonts', function() {
return gulp.src(globs.fonts)
  .pipe($.flatten())
  .pipe(gulp.dest(path.dist + 'fonts'));
});


// ### Images
// `gulp images` - Run lossless compression on all the images.
gulp.task('images', function() {
return gulp.src(globs.images)
  .pipe($.imagemin({
    progressive: true,
    interlaced: true,

And it should behave like you want.

You could also create a separate gulp task to handle edgecases like this. like fonts:fontfacekit and then have set things up specifically for that package.

You could also PR that repo and make it so the full path is configurable.

To be honest I would probably just use google fonts for something like this. Then you would benefit if someone has already loaded open sans from their cache (pretty likely).