Skip to content


Adding font variations to custom module #51

wants to merge 4 commits into from

3 participants


I don’t really know if this is the best way to go about this, but it seems to be working for me. The code pretty much just reuses the FontApiParser in the custom module. This seems a little messy since it creates a strong dependency from custom onto google. But for me this was more practical then copying and pasting most of FontApiParser.

I also needed to make a change to FontApiParser so that it would support oblique variations. I’m not sure if I did it right… my changes are all in the definition of webfont.FontApiParser.VARIATIONS.

Anyway I think these changes should address issue "self-hosted font variations”.

@seanami seanami commented on an outdated diff
@@ -11,6 +11,7 @@
webfont.CustomCss = function(domHelper, configuration) {
this.domHelper_ = domHelper;
this.configuration_ = configuration;
+ this.fvd_ = new webfont.FontVariationDescription();
seanami added a note

You don't need this added here, as it's not used anywhere else in this class.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

You're right that creating a strong dependency on the google module from the custom module is not a good idea. I'd take that out. Really though, you don't need anything from that module. The custom module doesn't need to have Google's specific naming shortcuts for different FVDs. All you really need is the ability to optionally add normal fvds (like n4, i4, o7) directly to the end of a family name and then pass those through to the onReady function. You actually don't need to do any parsing, verification or shortcuts at all.

This could be as simple as adding some code that splits the incoming family names on : and then takes the first element as the family name and everything after that as fvds. Then you just need to marshal that data into the right format to pass to onReady. You can omit the third argument to onReady (for test strings) as well. So, one example of valid data you'd be passing in would be:

onReady(['font1', 'font2'], { 'font1': ['n4', 'n7', 'i4', 'i7'] }

In that case, font2 had no fvds defined and would just load the default n4 (as defined in FontWatcher).

This branch also needs some tests added in the custom module's tests!


Thanks I’ll clean things up and try again.

But I have a question about test strings. Some of the fonts that I want to preload are custom icon style font’s that I’ve created. Some only have a few glyphs declared. For example one font just sets a specific width for the space character, and then has no other characters declared in the font. For a case like that I do need to specify a custom test string right?

My plan is to just make custom test string an option by adding another ‘:’ to split on.



Jesse, If you want to make an option for test strings in the custom loader, I think a better method would be to add another option to the config object. The custom module already supports families and urls, so I think you could add a third one called strings or testStrings. It should probably take an object mapping family names to custom test strings, and allow you to leave out family names you don't need custom strings for.

For example:

  custom: {
    families: ['normal-font:n4:n7', 'icon-font'],
    strings: { 'icon-font': 'tra' }
Typekit member

Closing this one as a new pull request has appeared that modifies the code in this one and adds tests. Let's continue the discussion in #80

@bramstein bramstein closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Showing with 31 additions and 4 deletions.
  1. +31 −4 src/custom/customcss.js
35 src/custom/customcss.js
@@ -17,14 +17,41 @@ webfont.CustomCss.NAME = 'custom';
webfont.CustomCss.prototype.load = function(onReady) {
var urls = this.configuration_['urls'] || [];
- var families = this.configuration_['families'] || [];
+ var familiesConfiguration = this.configuration_['families'] || [];
for (var i = 0, len = urls.length; i < len; i++) {
- var url = urls[i];
+ var url = urls[i];
this.domHelper_.insertInto('head', this.domHelper_.createCssLink(url));
- onReady(families);
+ var families = [];
+ var variations = {};
+ var testStrings = {};
+ for (var i = 0, len = familiesConfiguration.length; i < len; i++) {
+ var components = familiesConfiguration[i].split(':');
+ var family = components[0];
+ var familyVariations = components[1];
+ var familyTestString = components[2];
+ families.push(family);
+ if (familyVariations) {
+ var newVariations = familyVariations.split(',');
+ var existingVariations = variations[family];
+ if (existingVariations) {
+ variations[family] = existingVariations.concat(newVariations);
+ } else {
+ variations[family] = newVariations;
+ }
+ }
+ if (familyTestString) {
+ testStrings[family] = familyTestString;
+ }
+ }
+ onReady(families, variations, testStrings);
webfont.CustomCss.prototype.supportUserAgent = function(userAgent, support) {
Something went wrong with that request. Please try again.