SharePoint Brand Center APIs – Documentation (unofficial)

Sometimes it is great to know where the SharePoint Brand Center is actually located in your tenant. You can include enterprise assets in your customization, which are always kept up to date, or use custom fonts that you have deployed to your tenant.

Look no further, this is the unofficial documentation of those endpoints. It is not the full documentation but one endpoint that I think is important for you.

Get the Brand Center Configuration

You can retain the configuration of the SharePoint Brand Center using the following endpoint:

/_api/SP.BrandCenter/Configuration

This will return a couple of properties, and here are the most important ones.

• IsBrandCenterSiteFeatureEnabled (true|false)
  Returns if you have enabled the Brand Center in your tenant
• IsPublicCdnEnabled (true|false)
  Returns if the public CDN is enabled in your tenant
• BrandColorListId
  List ID where the color configurations are stored
• BrandColorListUrl.DecodedUrl
  Decoded URL to the color configuration
• BrandFontLibraryId
  Library ID where all the fonts are located in the Brand Center
• BrandFontLibraryListUrl.DecodedUrl
  Decoded Url to the font library
• OrgAssets
  Returns the configuration of the org assets in your SharePoint tenant.
• SiteId
  SPSite ID where the Brand Center is located
• SiteUrl
  Site URL of the Brand Center

With this one request, you can obtain all the important information about the brand center directly.

Get the CDN URL for fonts

All fonts you upload to the brand center get synced to the public CDN connected to your tenant. Microsoft documented how to construct the CDN Url in your code.

Although this documentation is not up to date, it contains important information.

https://public-cdn.sharepointonline.com/<TenantHostName>/sites/site/library/asset.png

In the URL above, you see the domain where the public CDN is located. The path always includes the tenant’s hostname followed by the path of your side, library, and then assets.

Instead of hard-coding this endpoint in SPFx, you have to use the following property.

// https://public-cdn.sharepointonline.com/
this.context.pageContext.legacyPageContext.publicCdnBaseUrl

I haven’t yet found another way to obtain the publicCndBaseUrl.

When you now want to load a font, for example, from the brand center CDN endpoint, you must follow these steps.

// CND Base Endpoint
const cdnBaseUrl = this.context.pageContext.legacyPageContext.publicCdnBaseUrl;
// brandCenterConfig is the retrieved brand center config 

const fontBasePath =
    brandCenterConfig.BrandFontLibraryUrl.DecodedUrl.replace(
    `${window.location.protocol}//`, ''
);

const fontUrl = `${cdnBaseUrl}${fontBasePath}`;

This should provide you with the base from which you can locate all the fonts uploaded to SharePoint, even if they are not initially present.

Final thoughts

It took me a while to figure out how to load all fonts from the brand center. Microsoft utilizes a legacy API that loads fonts via JavaScript, dating back to 2014. The FontFaceSet API was popular around that time and was later replaced by the more advanced @font-face option in CSS.

I would use the fontUrl as a CSS custom property to load all or specific fonts for the web part.

Hope this information gives you a great insight on the SharePoint Brand Center.