Adding your custom fonts to the SharePoint Brand Center

Infuse your brand’s essence and personal flair into every page and site—unleash your custom fonts into SharePoint and make your digital presence as unique as your brand. Here’s a detailed tutorial on how to add custom fonts in your new brand center. 

Once your SharePoint Brand center is created, you will be given a new URL for the Brand Center Management Application.

Follow that URL and you will be taken to your new brand center management site.

New Brand Center

In this early preview of the brand center, you’ll only have access to brand font management, and these fonts will only impact the following areas in SharePoint: 

  • Site header – site title 
  • Hub header – hub title 
  • Navigation (hub and site) – links and labels 
  • News web part 
  • Page title region 
  • Quick links web part 
  • Button 
  • Dashboard for Viva Connections 
  • Image web part 
  • Site header – finish 
  • Section heading 
  • Hero web part 
  • Sites web part 
  • People web part 
  • Call to action web part 
  • Text web part (RTE) 
  • All web part titles (from Microsoft) 

*List and libraries aren’t affected by the font updates

Below you’ll find the supported file types. WOFF2 is recommended for SharePoint and Viva Connections.  When downloading fonts from the internet (for free), they are typically downloaded as .ttf or .otf. You can find tools online to easily convert these to woff2 format, like this conversion tool: https://cloudconvert.com/ttf-to-woff2.

Font file type File extension
True Type fonts .ttf
Open Type fonts .otf
Web Open Format Font  .woff
Web Open Format Font  .woff2 (recommended)

How to add your custom fonts

  1. From the brand center home page select Add Fonts. 
  2. After selecting the Add Fonts you will be directed to the font management screen. From there you can upload your fonts files. Select Upload or drag and drop your files into the library.
  3. After uploading the files some metadata must be extracted from the font files for use in the Brand Center. There is a slight delay for this metadata extraction and for the fonts to become available for use in your sites.

Currently, uploaded fonts cannot be deleted, only hidden. Be selective with uploads to avoid cluttering the font library. To use the fonts in your sites you need to create a package and apply it for usage.  

Creating a package for your custom fonts

To apply your fonts to SharePoint and Viva Connections follow these steps: 

  1. Select either SharePoint or Viva Connections from the Apply your brand section. 
  2. Select Add font package.

  3. After selecting add font package, you’ll be taken through a setup wizard to set up your package.  
    • In Step 1, you’ll select your fonts for two purposes, Display and Content
      • Display fonts are used sparingly to emphasize important items. 
      • Content fonts are used widely to ensure consistency and legibility at all sizes.
      • You can have fonts from different font families or from the same family, just make sure you have uploaded each Font Family separately to assign them for the specific uses.
    • In Step 2 you’ll assign specific weights of the fonts for different usages.
    • In Step 3 you’ll give your font package a unique name, this is the name that will appear when adding it to your site. Once completed, save your progress and the package is saved for use.

How to apply custom fonts

  1. Navigate to the site that you want to customize with your newly added font. 
  2. Select the gear from the Suite bar and select Change the Look. If you have set up the brand center, you’ll now see the new “Font (preview)” option.  
  3. Select the Font(preview) option which will open a new panel for the font selection.  
    • By default the option is selected to Segoe, the font we have been seeing for so long. There are also some standard fonts available from Microsoft, including the newly designed and released Aptos typeface.
  4. Select the fonts dropdown to view the options available.
    • If custom fonts haven’t been added, the “From my organization” list will not be visible.
  5. Selecting a font lets you preview what your page will look like.
  6. After selecting your custom font, make sure to select Save to apply the changes.
Default Segoe UI font appliedCustom font applied

It’s important to emphasize the extraordinary ability this gives: the power to modify your SharePoint sites with your own fonts. This is not merely a technical feature but also a strategic branding tool that allows you to weave your unique brand identity into the very fabric of our digital workspace. By doing so, you ensure that every aspect of your SharePoint environment resonates with the visual signature that your brand stands for, thereby reinforcing company culture and aesthetics in a consistent and visually engaging manner.

The Chronicles of Creospark
Kunaal Sharma

Subscribe our newsletter

Enter your email to get latest updates.