• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Selectively disable OpenType features in webfonts

Participant ,
Apr 13, 2022 Apr 13, 2022

Copy link to clipboard


Is there a way to select exactly which OpenType features you want to enable in a webfont added to a web project in Adobe Fonts?


I am making a website where I use two fonts, a serif and a sans-serif. Both are great fonts with extensive OpenType support; the serif (Skolar) is taken from Adobe Fonts, while the sans is hosted locally.


The trouble is that I want to always apply stylistic set 01 to the sans-serif, but never to the serif. This turns out to be quite tricky to achieve stably:


  • In the font-face declaration for the sans font, I have turned on ss01, and this is enough to make it work exactly as intended in some browsers (Firefox and Safari, specifically); but WebKit browsers don’t support font-feature-settings inside font-face declarations, so it has no effect in Chrome, Opera, Edge, etc.
  • Adding styles .sans and .serif that specify both the font family and whether to use the stylistic set or not sort of works – except when you have something like a serif span inside a sans-serif paragraph or vice versa. Then, depending on class names and rule specificity, inheritance takes over and overrides, resulting in sans-serif text without ss01 or serif text with ss01. You end up with a mess of local overrides overriding overrides, and every minor change breaks it somewhere.


When editing your project on Adobe Fonts, I can choose not to include support for OpenType features, which would be the easiest solution – if there is no ss01 available in the font, applying it will do nothing and I can just set ss01 on everything. But excluding OpenType features also makes it impossible to use small-caps, old-style figures, etc., and I do want those.


The screenshot on this Adobe help page looks like supported OpenType features are clickable, which would imply that you can include or exclude them individually. But my project page doesn’t look like that: all my OpenType features are the same disabled-looking grey (see attached screenshot).


So is there some way to use an Adobe Font in a web project with OpenType features, but without stylistic sets?






Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation