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)
• [x] 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 (https://github.com/SharePoint/sp-dev-docs/issues/9830#issuecomment-3297424632), 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.