Brand Center font package falls back to default font after saving another "Change the look" pane in the same page session #11069

Target SharePoint environment

SharePoint Online

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

SharePoint REST API

Developer environment

Windows

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

• Edge Version 155.0.4283.62 (Official build) (64-bit)
• Chrome Version 156.0.8078.48 (Official Build) (64-bit)

Describe the bug / error

A site that uses a Brand Center font package loses its custom fonts and renders in Segoe UI when, in a single page session, a site owner chooses the font package in Settings > Change the look > Font, saves, and then saves another Change the look pane (for example Theme) without reloading the page.

After this the browser requests the font files relative to the current page instead of from the Brand Center, and every request returns 404:

/sites/<site>/SitePages/<font>-Bold.ttf      404
/sites/<site>/SitePages/<font>-SemiBold.ttf  404
/sites/<site>/SitePages/<font>-Medium.ttf    404
/sites/<site>/SitePages/<font2>.ttf          404

On working site in the same files load from
https://public-cdn.sharepointonline.com/contoso.sharepoint.com/sites/BrandCenter/Fonts/<file> (200).

Re-saving the font or theme afterwards does not repair the site. It reproduces every time, across any/all sites in my sandbox tenant.

What I found in the stored theme

The applied theme is written to the site's current themed folder, /sites/<site>/_catalogs/theme/Themed/<folder>/theme.sptheme, and _api/web?$select=ThemedCssFolderUrl names that folder. Its fontPackageJson attribute holds the font file paths. Watching that folder through the steps below:

The font package itself is healthy: _api/FontPackages/GetById('<package id>') returns IsValid: true and MissingFontFiles: [], and its PackageJson holds bare file names, which appears to be by design. The server-side step that runs after a font save turnURLs. Saving another pane writes the page's in-memory copy of the theme, which still has the bare names from before that server step, and no server step follows it.

Steps to reproduce

Needs a site owner and a Brand Center font package with custom font files.

1. Open the site home page and reload it.
2. Settings > Change the look > Font > choose any other font package > Save.
3. Without reloading: Settings > Change the look > Font > choose the Brand Center font package > Save. The themed folder now has full font URLs and the fonts load.
4. Still without reloading: Settings > Change the look > Theme > Save (no change needed).
5. Reload the page. The current theme.sptheme has bare font paths and the font requests return 404.

Read-only check from the browser console on any site:

(async () => {
  const site = location.pathname.match(/^\/sites\/[^/]+/)[0];
  const web = await (await fetch(site + "/_api/web?$select=ThemedCssFolderUrl",
    {headers: {Accept: "application/json;odata=nometadata"}})).json();
  const t = await (await fetch(web.ThemedCssFolderUrl + "/theme.sptheme")).text();
  return /BrandCenter\/Fonts/.test(t) ? "OK: full font paths" : "BROKEN: bare font paths";
})()

Expected behavior

Saving any Change the look pane keeps the resolved Brand Center font URLs, or runs the same server-side resolution that a font save does. The custom fonts keep loading.

Workaround

A site owner can repair an affected site:

1. Reload the page.
2. Change the look > Font > choose a different package > Save.
3. Reload.
4. Change the look > Font > choose the Brand Center package again > Save.
5. Reload before opening any other Change the look pane.