Brand Center Fonts not applying to FUI Panel contents

[jimmywim]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Linux

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

SPFx 1.22.1
Using Fluent UI @microsoft/sp-office-ui-fabric-core or @fluentui/react@8.125.3

Describe the bug / error

Brand Center Custom Fonts are not being applied via style sheets on elements inside a Fluent UI Panel.

Following instructions as per this page: https://learn.microsoft.com/en-us/sharepoint/dev/design/use-brand-center-fonts-in-spfx-components

Steps to reproduce

Set up a site to use a custom font via the Brand Center, or one of the 1stP provided alternative fonts available in "Change the look".

Using a Fluent UI <Panel /> component, within the contents of the panel, use CSS class to apply a custom brand center font to the element, such as:

.channelH3 {
  font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)) !important;
}

Apply that class name to an element within the Panel contents.

Observe the custom font is not applied.

Additional observation, from the below screenshot from DevTools, you can see the style rule is applied to the selected element (highlighted white), but the font-family var is not being resolved to either value (they are grey, one should be white).

Expected behavior

Brand Center fonts should apply just like other elements on the page.

[Ashlesha-MSFT]

Hello @jimmywim,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.