How to enable font-feature-settings for a specific font-family

[nilsborg]

Hey gang,
ran into a rather specific problem today:
We're loading Cascadia Code (the variable one) like so:

@font-face {
    font-family: "Cascadia Code";
    src: url("/fonts/CascadiaCodeItalic.woff2") format("woff2");
    font-weight: 200 700;
    font-display: swap;
    font-style: italic;
    font-feature-settings: "ss01" 1; 
  }

and enable the font-family in tailwind-config.js here:

extend: {
  ...,
  fontFamily: {
    source: ["Cascadia Code", ...defaultTheme.fontFamily.mono],
  },
  ...,
}

and that works great expect that Chrome does not pick up the font-feature-settings in the font-face rule. Safari and Firefox do pick it up and that's great.

So my question is if there's a Tailwind specific way to apply these font-feature-settings for only the italic and font-source combination of classes?

[wongjn]

For the simplest solution here since it is only 1 combination selector of .italic.font-source, I would write this out literally in your CSS:

.italic.font-source {
  font-feature-settings: "ss01" 1; 
}

Otherwise, you could have a go at writing a custom plugin for it.

[adamwathan]

Opened a PR to allow you to configure default font-feature-settings for your configured custom fonts in the framework:

#9039

Think this will help 👍

[nilsborg]

@wongjn Thank you for this super simple tip! I'll add that in until Adam's PR is merged!
@adamwathan thanks to you to for jumping on this so quickly!

[linpan]

font-feature-settings