Description

I am using the block editor outside of a wordpress installation and I am using the editor in a framed view using <BlockCanvas/>

I have registered fonts and they show in the ui, I can switch and change font and the font classes get applied to the block but the classes don't exist.

To generate the style attribute, I am using the provided function useGlobalStylesOutputWithConfig. This generates plenty of css from the given styles and settings objects but seems to not generate the required font classes and variables.

I am assuming this is the way it should work? I can't see anything else in the packages that mentions font class generation etc. Any help would be appreciated as i have been struggling with this for days.

Step-by-step reproduction instructions

1. Build a simple object settings property with some font families and a a styles property.
2. Pass this to 'useGlobalStylesOutputWithConfig'
3. Result should contain classes and variables for given fonts?

Screenshots, screen recording, code snippet

const settings = { settings: { layout: { contentSize: "620px", wideSize: "1280px", blockGap: "400px", }, typography: { fontStyle: true, fontWeight: true, letterSpacing: true, lineHeight: true, textDecoration: true, textTransform: true, writingMode: true, fontFamilies: { theme: [ { fontFamily: "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", name: "System Sans-serif", slug: "system-sans-serif", }, { fontFamily: "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", name: "System Serif", slug: "system-Serif", }, ], }, fontSizes: { default: [ { name: "Small", slug: "small", size: 12 }, { name: "Normal", slug: "normal", size: 16 }, { name: "Large", slug: "large", size: 24 }, { name: "Huge", slug: "huge", size: 36 }, ], }, }, }, styles: { blocks: {}, typography: { fontFamily: "var(--wp--preset--font-family--body)", fontSize: "var(--wp--preset--font-size--medium)", fontStyle: "normal", fontWeight: "400", lineHeight: 3.5, }, }, };

Environment info

Node js

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes