How to Add Custom Fonts to SharePoint

By João Ferreira Apr 29, 2024 Branding 0 Comments

In my latest blog post, I walked you through the creation of a new Brand Center, laying the groundwork for fresh customizations on SharePoint. Today, we’re taking it a step further by adding a personal touch with custom fonts. Let’s dive in.

Step-by-Step Guide to Adding Custom Fonts to SharePoint

1. Establishing a Brand Center: If you haven’t set up your SharePoint Brand Center yet, it’s essential to start there. You can find a detailed guide on establishing your Brand Center in this article.
2. Accessing the Brand Center: Navigate to the Brand Center application at /_layouts/15/brandcenter.aspx on your SharePoint site.
   
3. Uploading Fonts: In the Brand Center, click on the ‘Brand fonts’ section to upload your custom fonts. SharePoint supports:
   • TTF(True Type fonts)
   • OTF (Open Type fonts)
   • WOFF (Web Open Format Font)
   • WOFF2 (Web Open Format Font)

   For optimal performance, the WOFF2 format is recommended due to its web-optimized compression, leading to faster loading times. Note that there’s a 10MB limit per font file.

   

4. Managing Fonts: Custom fonts are stored in a hidden Fonts library but can be managed directly from the Brand fonts page in your Brand Center. To remove a font, simply select it and hit delete.
5. Creating a Font Package: After uploading, create a font package to display in the Change the Look settings of your SharePoint site collections.
   

   

6. Configuring Font Packages: Return to the Brand Center and select Font packages under the Apply your brand Click New Font Package and choose your fonts for:
   • Display Font: Display fonts are used sparingly to emphasize important items. Choose a display font that uniquely represents your brand.
   • Content Font: Content fonts are used widely to ensure consistency and legibility at all sizes. Choose something versatile and easy to read.

   

7. Assigning Fonts: Assign your chosen fonts to specific areas ensuring they align with their intended use:
   • Title: The title font is used to identify the most distinct items for your experience. Consider using your display font.
   • Headline: The headline font is used for a variety of headings and titles in the experience. Consider your content font in a bold or semibold style.
   • Body: The body font is used in more versatile ways and should be easy to read. Consider your content font in a normal or regular style.
   • Interactive: The interactive font is used for items that trigger action, such as buttons. Consider using your content font with a bold or semibold style.

   

8. Naming and Visibility: Name your font package descriptively and check the Visible option to ensure it appears in the Change the Look options.
   

   

9. Applying the Font Package: Open Change the Look in the site collection where you want to apply your new font package. Under Fonts, you’ll find Microsoft’s default packages and your custom ones. Select yours and save.
   

   

Currently, as I write this post, SharePoint custom fonts are in preview and being rolled out. With this firs release you can see them applied across SharePoint and Viva Connections in the following elements:

• 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)
• Viva Connetions
  • Welcome/Greeting text
  • Section Headings
  • Dashboard cards Level 1
  • Resources

For a complete demonstration of the new Brand Center and custom fonts in action on SharePoint, check out the accompanying video.

There you have it’a straightforward guide to infusing your SharePoint sites with brand-aligned typography. Stay tuned for more updates and tips on leveraging SharePoint’s evolving features.