Incompatibility of web components with SharePoint Custom Fonts

[jamesdellowwv]

Version used
4.11

Describe the bug
This is an incompatibility arisen from a new (currently in preview) SharePoint Online feature, which permits the use of alternative and custom fonts. I'm raising as a bug, but I recognize this could be considered an enhancement or might eventually be fixed on the SharePoint side. However, I can't find an easy work around at the moment as we start to use custom fonts.

In the debug layout, @root.theme.fontFaces and @root.theme.fontSlots can be seen to contain the custom font family selected, but other font values are still set to the original default font family ("'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif") which are then passed to the layout web components via assigning @root.theme.fonts to data-theme-variant.

It doesn't appear to be possible to override this in the template, other than not passing @root.theme to data-theme-variant (which would be a tedious workaround).

The following also contain default font family:

• "adaptiveCardsHostConfig": "{\n\t"fontFamily": "Segoe UI, Helvetica Neue, sans-serif"\n}",
• utils.adaptiveCardsHostConfig.fontFamily": "Segoe UI, Helvetica Neue, sans-serif"
• documentCardFields configuration for 'location' also references @root.theme.fonts.small.fontFamily.

To Reproduce
Detailed steps to reproduce the behavior:

1. Assuming this preview feature is available in your tenant, select an alternative font from the options available or pick a custom font.
2. The fonts used by PnP Modern Search V4 result layouts ignore this setting, however, the font family is available and is being passed in @root.theme.fontFaces and @root.theme.fontSlots.

Expected behavior
The custom font family is used instead of the original default font.

Screenshots
N/a

Desktop (please complete the following information):
N/a

Additional context
For more about custom fonts in SharePoint Online, see https://learn.microsoft.com/en-us/sharepoint/brand-fonts