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.
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?
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?