Hey all,

To get around a font-weight rendering problem with Safari*, our font-embed has a range for a font-weight:

export const font = localFont({
  ...
  weight: '100 900',
});

(note that "100 900" is supported syntax**)

Bug/problem:
In the pages rendered by NextJS everything works fine (presumably because PostCSS pseudonymizes CSS-classes).

In Storybook, however, the embedded font isn’t applied to elements anymore (everything shows in serif). The culprit is the CSS-class and -selector that localFont() generates:

<style>
  .font-b5c2e0-100 900 {
    font-family: font-b5c2e0;
    font-weight: 100 900;
  }
</style>

(code trimmed for brevity)

My root element (in Storybook) gets the following CSS-class set on it:

<div class="font-b5c2e0-100 900">

*(note that although * class="font-b5c2e0-100 900" and .font-b5c2e0-100 900 {…} contain the same string, the class won’t match the selector due to the space)

Conclusions/assumptions:
It looks a lot like NextJS isn’t doing the necessary whitespace-escaping when adding font-weight to generated font-classnames. NextJS is bailed out by default CSS post-processing, but Storybook is not so lucky.

I even found the line source-code where the bug (I think) originates:
https://github.com/vercel/next.js/blob/canary/crates/next-core/src/next_font/local/mod.rs#L266

Does anybody in here have any ideas/suggestions on how to more-easily solve the above problem though? Am I missing something obvious here?

Thanks everybody.


* https://github.com/rsms/inter/issues/686
** https://nextjs.org/docs/pages/api-reference/components/font#weight