Problem with font from Brand center and SPFx/FUI8 & FUI9

[rgcircum]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

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

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

Additional environment details

• browser version : latest
• SPFx version : 1.19.0
• Node.js version : 18.x / 20.x

Describe the bug / error

On a SPFx project, If use the predefined variable (ex:fontFamilyCustomFont800) to override font in dialog, callout, navigation, dropdown, etc (all element have no inline renderer) ... the variable is undefined (see screenshot).

I think it's coming because the fonts variables is created in first Fluent provider, and all callout, dialog, ect is rendered outside of this div.

I tried with FUI8 & FUI9 lib.

[edit] - the font override do not work with applicationCustomizer, Header & Footer :/

Steps to reproduce

1. Create SPFx project with themeProvider & dialog and apply font variable on tittle of dialog.

Expected behavior

That the fonts are also applied to the floating elements.

[StfBauer]

Fluent Ui always appended the dialog before the body and positioned it then fixed accross the screen. That's why we never use the Fluent UI Dialog and use a native HTML <dialog> Element

CSS Variables are always scoped to the container they have been applied to not to the ouside elements.

I tested the font variable on the custom PnP SPFx Live Reloader - The font gets applied wihout any problem on this App Customiser.

The problem you might face that a specifc font weight is not available which then falls back a Times New Roman like in this case.

This problem also become emminent in first party web part, where the rendered font falls back to the default browser font "Times New Roman".

It's still not yet an optimal implementation.

[rgcircum]

The dialog box is just an example, it does it on all floating elements (outside the first theme provider of SP), callout, Drawer, Panel, Dropdown, navigation .... and especially on customizer applications..

The problem is that we do not have control over the provider generated with the right variables, it should be generated at the Body tag level

Hopefully this will be fixed when it's in GA, because it's unusable.