0

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?

stefan judis
  • 3,416
  • 14
  • 22
giannicash
  • 1
  • 2

2 Answers2

0

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 Font.js for that task (which is now used in https://wakamaifondue), 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 Font.js's GSUB test function.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Weird to see folks downvote an answer that is literally the answer. The GSUB side of font parsing is [_incredibly complex_](https://learn.microsoft.com/en-us/typography/opentype/spec/otvarcommonformats) and detecting all features means you either use a JS based font parser that someone else wrote, like Font.js (ES6) or Harfbuzz (WASM), etc. or you implement it yourself, from scratch, which is a spectactular amount of work and guaranteed to get you stuck on a single task for weeks. – Mike 'Pomax' Kamermans Nov 24 '20 at 16:47
0

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.

Tom
  • 6,325
  • 4
  • 31
  • 55