How to work around Fontdeck giving different font families for one font?

Question

Fontdeck doesn't offer an option to host files yourself, and unfortunately the CSS it returns has different font families for different variations of the font:

@font-face {
    font-family: 'Apercu Pro Light';
    src: ...;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Apercu Pro Bold Italic';
    src:...;
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Apercu Pro Regular';
    src: null;
    font-weight: normal;
    font-style: normal;
}

This is highly inconvenient, especially given that they already know correct weight and style. Can I work around this and still use Apercu as font-family in my CSS and have browser figure out which font to use?

Answer 1

Since Fontdeck suggests to use webfontloader to load fonts, we can listen to its events and rewrite the inline <style> tag it appends as soon as it is available:

(function () {
  'use strict';

  var hasRewrittenRules = false;

  /**
   * Fontdeck returns different font-family for each font variation.
   * We will rewrite inline <style> it creates to have one font-family.
   */
  function rewriteFontFaceRules() {
    if (hasRewrittenRules) {
      return;
    }

    var key,
        sheet,
        index,
        rule,
        fontFamily;

    for (key in document.styleSheets) {
      sheet = document.styleSheets[key];
      if (!sheet.ownerNode || sheet.ownerNode.tagName !== 'STYLE') {
        continue;
      }

      for (index in sheet.rules) {
        rule = sheet.rules[index];
        if (!(rule instanceof window.CSSFontFaceRule)) {
          continue;
        }

        fontFamily = rule.style.fontFamily;

        // CHANGE REWRITING RULES HERE:

        if (fontFamily && fontFamily.indexOf('Apercu') > -1 && fontFamily !== 'Apercu') {
          rule.style.fontFamily = 'Apercu';
          hasRewrittenRules = true;
        }
      }
    }
  }

  window.WebFontConfig = {
    fontdeck: { id: /* YOUR FONT ID */ },
    fontactive: rewriteFontFaceRules,
    active: rewriteFontFaceRules
  };

  var wf = document.createElement('script');
  wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();