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

[rgcircum]

What type of issue is this?

Question

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

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

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

All

Issue description

Following the investigations carried out to try to resolve the following bug (#9830 (comment)), I have a suggestion.

At the end of the post, I propose a solution that partially works, but it's not optimal:

• It uses undocumented endpoints
• These endpoints don't work for external users

But during my research, I realized that "pageContext.legacyPageContext" contained the font information for the header, nav, siteTitle and footer:

fontOptionForSiteFooterNav :

{"fontFace":"Regular","fontFamilyKey":"Sevillana-1898433433","fontVariantWeight":null}

fontOptionForSiteFooterTitle :

{"fontFace":"Regular","fontFamilyKey":"Sevillana-1898433433","fontVariantWeight":null}

fontOptionForSiteNav :

{"fontFace":"Regular","fontFamilyKey":"Sevillana-1898433433","fontVariantWeight":null}

fontOptionForSiteTitle :

{"fontFace":"Regular","fontFamilyKey":"Sevillana-1898433433","fontVariantWeight":null}

@VesaJuvonen @jansenbe Would it be possible to add the font selection information for the site collection in the same way?

The necessary information is (for exemple returned from the endpoint /_api/FontPackages/GetById('<%fontPackageId%>')):

{
    "fontFaces": [
        {
            "fontFamily": "Sevillana-1898433433",
            "path": "Sevillana-Regular.ttf",
            "fontType": "displayFont"
        }
    ],
    "fontSlots": {
        "title": {
            "fontFamily": "Sevillana-1898433433",
            "fontFace": "Regular"
        },
        "heading": {
            "fontFamily": "Sevillana-1898433433",
            "fontFace": "Regular"
        },
        "body": {
            "fontFamily": "Sevillana-1898433433",
            "fontFace": "Regular"
        },
        "label": {
            "fontFamily": "Sevillana-1898433433",
            "fontFace": "Regular"
        }
    }
}

Another suggestion, could custom fonts be returned by this._themeProvider.tryGetThemeV2() as CSS variables? Fluent UI 9 allows adding custom variables easily.

This is suggestions and my last attempt to make the product better before informing my customers that Microsoft refuses to fix this issue and directing them to official Microsoft support.

[Ashlesha-MSFT]

Hello @rgcircum,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@rgcircum,
Thank you for sharing your investigation and suggestions regarding the font issues with Brand Center and SPFx using Fluent UI 8 & 9.
Summary of our findings so far:
The Fluent UI theme is correctly available and accessible (useTheme works as expected).
The pageContext.legacyPageContext does not contain Brand Center font metadata (legacyFonts is undefined).
The undocumented API endpoint / _api/FontPackages/GetById(...) does provide fontSlots and fontFaces data but is tenant-restricted and fails for external users, limiting its usability.

We confirmed Fluent UI 9 supports custom CSS variables for themes, which aligns well with your suggestion for returning font info through tryGetThemeV2().

We will escalate this internally to confirm whether adding font metadata to pageContext or exposing it via the theme provider (tryGetThemeV2 / CSS vars) is feasible and safe to support SPFx/FUI scenarios.

[StfBauer]

@Ashlesha-MSFT

The undocumented API endpoint / _api/FontPackages/GetById(...) does provide fontSlots and fontFaces data, but is tenant-restricted and fails for external users, limiting its usability.

The fonts that the Brand Center will load are not coming from the Font Library in the Brand Center, which would indeed limit the availability of fonts for external users and limit the usability. Instead, it should return all the fonts of a font family, with the proper CDN URL. This way, every user will be able to load the fonts internally or externally.

[rgcircum]

@StfBauer :
I tested other use cases with a font replacement:

• Customizer Application
• Single App Page
• Empty Web Part Page

In all cases, there's a fluentProvider1 at the top level that provides the variables. Excluding SharepointBar and AppBar, it includes the content, but also the placeHolder for customizer applications.

---

If the fonts are already loaded, the CDN is normally not necessary; just the reference should be useful?

Maybe I missed a use case.

However, having the CDNs would allow us to have a reference in case we wanted a different font on a custom Web Part (via a font selection in the web part's options panel). We have all the endpoints, even those for listing all the declared fonts, which would be simple to develop for third parties.

[StfBauer]

Custom Web Parts, for example, often feature super bold fonts like heavy and ultra, as you need to use them on a marketing site.

The bold font in the RTE is totally off in SharePoint; it just uses semi-/demi-bold instead of bold.

However, fonts loaded in SharePoint use an outdated JavaScript APi that does not support modern fonts such as variable fonts.

I was talking more about the fact that I want to have all the fonts in a font family that I uploaded. Since they will be synced to the CDN, I could embed them via @font-face in my web part.