What's the right way to use next/font with Salt

[origami-z]

To use Salt, we need load font. In theory, we can use next/font's variable option with --salt-typography-fontFamily pointing to next's font.

import { Open_Sans } from 'next/font/google';

const openSans = Open_Sans({
  subsets: ['latin'],
  variable: '--salt-typography-fontFamily',
  display: 'swap',
});

return (
    <SaltProvider>
      <div className={openSans.variable}> 
          ..........
      </div>
    </SaltProvider>
)

.__variable_19b540 {
    --salt-typography-fontFamily: '__Open_Sans_19b540', '__Open_Sans_Fallback_19b540';
}

However, css variable inheritance made it not working. e.g. when using Text component , font-family resolved to "Open Sans" which is not available if you don't have the font installed locally. The css variable resolution surprised me a bit, with my attempt to express it in a table (same order of Chrome dev tool styles tab) :

DOM / Class	Variable
.saltText	font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));
.__variable_19b540	--salt-typography-fontFamily: '__Open_Sans_19b540', '__Open_Sans_Fallback_19b540';
.saltTheme	--salt-text-fontFamily: var(--salt-typography-fontFamily);
.saltTheme	--salt-typography-fontFamily: "Open Sans";

I thought font-family would resolve to __Open_Sans_19b540 but not. So I need to brush up my CSS variable inheritance knowledge, and also need to find a way to use next/font

Sample StackBlitz

https://stackblitz.com/edit/stackblitz-starters-jbfoge?file=pages%2F_app.js

Reference implmentation

• Mosaic
• Salt site