Is there a way to find all features available in a font with JavaScript

Question

I'm developing a website with Nuxt and Contentful. I loaded some fonts using FontFace. I need to load them in this way because it's a Type design club website and they need to load their fonts as they release new ones.

They ask me to show all features of those loaded fonts, such as ligatures, stylistic alternatives, etc.

Is there a way in JavaScript to know which features are available for font?

Answer 1

You'd need code that can parse GSUB to a depth that gets you all features for all scripts/langsys, which is an incredibly complex thing to write yourself.

I wrote lib-font for that task (which is used by the folks over on https://wakamaifondue.com, a play on "what can my font do", an online font analysis service), with the test code covering a number of things you'd normally need to query a font on, including getting all features: for an example of listing all script/langsys/feature/lookup sets, have a look at lib-font's GSUB test function, with the simplified/compacted code being:

const { GSUB } = font.opentype.tables;

GSUB.getSupportedScripts().forEach((script) => {
  GSUB.getSupportedLangSys(script).forEach((lang) => {
    const langSysTable = GSUB.getLangSysTable(script, lang);

    GSUB.getFeatures(langSysTable).forEach((feature) => {
      const { lookupListIndices, featureTag } = feature;
      const lookupIDs = lookupListIndices;

      lookupIDs.forEach((id) => {
        GSUB.getLookup(id).forEach((lookup) =>
          console.log(font, script, lang, featureTag, id, lookup)
        );
      });
    });
  });
});

Answer 2

Opentype.features.js npm package can do this.

As well as listing the short (4 char) tags, it also lists the feature description (if available in the font)

Additionally it also lists the unicode character(s) the font feature pertains to.