Usage of custom font from Site Branding

[maxkuzma-munich]

Hi everyone,
I’m testing the new Site Branding / Brand Center feature in SharePoint, specifically the ability to assign a custom font to a site. The font seems to apply correctly to the modern page UI, but I’m struggling to understand the intended way for SPFx solutions to use that custom font.

Right now, the only method I’ve found that works inside my web parts is using something like:

font-family: var(--fontFamilyCustomFont500), var(--fontFamilyBase);

This applies the custom font, but it means I have to manually set a font-family on every Fluent UI component or text element. Fluent UI doesn’t seem to inherit the custom Site Branding font automatically, so I end up overriding styles in many places.

My questions:

1. Is this the correct/official way to use Site Branding custom fonts in SPFx?
   Should we rely on variables like --fontFamilyCustomFont500, or is there a more generic variable that aligns with standard SharePoint text types (body, strong, monotype, etc.)?

2. Is there a better mapping or structure we should be using?
   For example:

• Heading font
• Body font
• Strong font
• UI/monospace font

So that different text types automatically render using the correct branded typography.

Should Fluent UI controls automatically pick up these new SharePoint font variables?
Or is manual styling expected until Fluent UI / SPFx updates?

At the moment, my web part typography feels disconnected from the branded site experience because I need to style each component manually. I’d love to know the recommended approach or any best practices others have discovered.

Thanks!