@next/font + font-feature-settings

[bradwoods]

Requesting this issue be reopened - #41862

[lightwalker-eth]

+1 on this request. For security reasons it's very important for our use case to make use of the disambiguation capability in Inter. Without this, characters such as 1, i, and l can appear similar.

More details here: https://rsms.me/inter/#features/ss02

[joulev]

I think you have to self-host fonts here, as I don't think the Inter version hosted on Google Fonts support those features. You can try it by using Google's font file directly e.g.

/* Taken from the CSS file returned by Google Fonts */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff)
    format("woff");
  font-feature-settings: "ss02";
}

and you will notice that the feature doesn't work.

If you self-host the font by downloading from https://rsms.me directly, you can then use next/font/local with declarations to customise the @font-face declaration.

const inter = localFont({
  src: [...],
  display: "swap",
  declarations: [{ prop: "font-feature-settings", value: "ss02" }],
  variable: "--sans",
});

[ben-katz]

@joulev's advice worked for me. I had to download the font and then load it as a local font. However, the declarations alone wasn't enough I also had to apply the proper CSS after as well, in my case the feature was ss03 so font-feature-settings: 'ss03' on;

It's really weird to me that almost nowhere are these features acknowledged or displayed. I only found out they existed from playing around in Figma.