8-Week Microsoft Teams AppDev Accelerator Program
Limited seats available! - Start date: Wednesday, April 16, 2025
Join Today & Save $1,000
articles

Use SharePoint brand center fonts in SPFx solutions

Developers can use the fonts defined in the new SharePoint brand center in your custom SharePoint Framework (SPFx) with font slots and font tokens - learn how!

Use SharePoint brand center fonts in SPFx solutions
by Andrew Connell

Last updated March 28, 2025
3 minutes read

Share this

Focus Mode

  • Use SharePoint brand center fonts in SPFx components
  • Test your custom fonts
  • Feedback & questions

The SharePoint brand center offers a centralized branding management application that empowers your brand managers or designated brand owners to help your organization to customize the look and feel of their experiences. This brand asset management system allows customers to manage the colors, fonts, and images, and other assets all in one place.

Developers can use the fonts defined in Brand center in their SharePoint Framework (SPFx) components. This article demonstrates how you can use the fonts defined in the SharePoint brand center in your SPFx components.

SharePoint brand center

SharePoint brand center

Use SharePoint brand center fonts in SPFx components

SharePoint’s brand center enables users to select different fonts for different parts of the SharePoint UX. These are referred to as font slots. In your custom SPFx solutions, you’ll refer to the slots using font tokens.

Let’s see how to do this:

Let’s assume you already have a SPFx web part project. All CSS styles are stored in the SCSS module file in the same folder as your web part, such as ./src/webparts/helloWorld/HelloWorldWebPart.module.scss.

To use one of the fonts defined in SharePoint brand center, set the font-family style on the desired CSS classes in your component using the font tokens. The tokens are available as variables in your SPFx component with the --fontFamily prefix.

For example, to use the CustomFont100 font token, update your web part’s class to the following:

  .helloWorld {
++  font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase));
    overflow: hidden;
    padding: 1em;
    color: "[theme:bodyText, default: #323130]";
    color: var(--bodyText);
    &.teams {
      font-family: $ms-font-family-fallbacks;
    }
  }

This tells the SPFx runtime to set the font-family style to the variable --fontFamilyCustomFont100, but if that value isn’t set, it will default to the --fontFamilyBase slot.

Learn More About All Available Font Slots & Tokens

To learn more what font slots and tokens are available, see: Use SharePoint brand center fonts in SharePoint Framework solutions.

Test your custom fonts

Unfortunately the SharePoint hosted workbench does not support custom fonts defined in the SharePoint brand center. To test your web parts, you’ll need to test them on a page in a SharePoint site.

  1. Start by running the command gulp serve from the root of the project and include the –nobrowser argument:

    gulp serve --nobrowser
    
  2. In the console, the gulp serve command will output a line that looks similar to the following:

    [spfx-serve] To load your scripts, use this query string:
         ?debug=true&noredir=true#debugManifestsFile=https://localhost:4321/temp/manifests.js
    
  3. Open the browser and navigate to a page that you have permission to add a web part to the page.

  4. Add the query string from the preceding console message to the URL and load the page.

    When prompted in the Allow debug scripts dialog, select Load debug scripts.

  5. Next, put the page into edit mode and add your sample web part to the page.

  6. Finally, publish the changes.

With the web part on the page, select one of the custom fonts from the Brand center site:

  1. Select the gear icon in the top right of the Microsoft 365 suite bar, then select Change the look.

    SharePoint settings menu

    SharePoint settings menu

  2. On the Change the look panel, select Font.

    SharePoint setting Change the look panel

    SharePoint setting Change the look panel

  3. On the Font panel, select one of the fonts to view the changes on your web part.

    SharePoint setting Font panel

    SharePoint setting Font panel

    Notice the fonts on the page will change, including those in our custom web part:

    Custom font selected from Brand central used in the SPFx web part

    Custom font selected from Brand central used in the SPFx web part

Now you can use the custom fonts, defined in the recently released SharePoint brand center, in your SharePoint Framework components!

Andrew Connell, Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.
author
Andrew Connell

Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.

Andrew Connell is a full stack developer who focuses on Microsoft Azure & Microsoft 365. He’s a 20+ year recipient of Microsoft’s MVP award and has helped thousands of developers through the various courses he’s authored & taught. Whether it’s an introduction to the entire ecosystem, or a deep dive into a specific software, his resources, tools, and support help web developers become experts in the Microsoft 365 ecosystem, so they can become irreplaceable in their organization.

Feedback & Questions

newsletter

Join 10,000+ developers for news & insights

No clickbait · 100% free · Unsubscribe anytime.

Subscribe to Andrew's newsletter for insights & stay on top of the latest news in the Microsoft 365 Space!
blurry dot in brand primary color
found this article helpful?

You'll love these!

Webpack Magic in SPFx: Optimize Bundles with Code Splitting

Webpack Magic in SPFx: Optimize Bundles with Code Splitting

September 3, 2024

Read now

Opinion - SharePoint Framework Isn't Ideal for Microsoft Teams Tabs

Opinion - SharePoint Framework Isn't Ideal for Microsoft Teams Tabs

July 9, 2024

Read now

Secure SPFx Solutions in a Post Isolated Web Part Retirement

Secure SPFx Solutions in a Post Isolated Web Part Retirement

July 5, 2024

Read now

bi-weekly newsletter

Join 10,000+ Microsoft 365 full-stack web developers for news, insights & resources. 100% free.

Subscribe to Andrew's newsletter for insights & stay on top of the latest news in the Microsoft 365 ecosystem!

No clickbait · 100% free · Unsubscribe anytime.

Subscribe to Andrew's newsletter for insights & stay on top of the latest news in the Microsoft 365 Space!