Adding Custom Fonts to SharePoint Sites Manually Using ShortPoint Theme Builder

This article will demonstrate how you can manually add custom web fonts to your SharePoint site using ShortPoint Theme Builder.

TABLE OF CONTENTS

• Before we begin
• Checking Existing Web Fonts
• How to Add Custom Fonts using ShortPoint Theme Builder
  • Step 1: Upload Your Fonts to the Web Server
  • Step 2: Get a Direct Download Link to an Item Inside Your Library
  • Step 3: Use @font-face to build your custom font CSS
    • Name of font
    • Direct download link
    • Font format
  • Step 4: Add the Custom Font to your SharePoint site
• Using your custom Font to brand your SharePoint Site
• Frequently Asked Questions
  • 1. What if I added a font file, but it's not showing in the font picker?
  • 2. What if I want to add two or more fonts?
• Designing SharePoint fonts and typography

Before we begin

You can add custom fonts to your SharePoint site if:

• You have ShortPoint installed on your SharePoint environment (Office 365, SharePoint 2019, SharePoint 2013, and SharePoint 2016).
• You are a ShortPoint Designer with an active license.

If you are a new user and don't have any of these, you can start your journey with ShortPoint here.

Checking Existing Web Fonts

Before adding your Custom Web Font, it's worth checking if your desired font already exists within ShortPoint Theme Builder. You can check by following these steps:

Open the page where you want to add the custom font. Then, click the cogwheel icon (1) and select Site Settings (2). 

Click ShortPoint Dashboard. 

Select Theme Builder.

Click Customize my site.

On the Theme Builder, click Fonts & Typography (1). Then click Base (2).

Search for your font in the font field. If you find it, you can already use it without doing any extra work.

How to Add Custom Fonts using ShortPoint Theme Builder

Follow the steps below to start adding custom fonts to your SharePoint site:

Step 1: Upload Your Fonts to the Web Server

Upload your font files to your SharePoint site. You can use any library to store your fonts. 

For the purposes of this article, however, we will use the SharePoint Site Assets Library.

NOTE: Make sure that at the end of each font file, there is a direct download link.

DESIGN TIP: You can check this resource to access free fonts for commercial use. You can download the fonts you like and then upload them to your SharePoint site.

Step 2: Get a Direct Download Link to an Item Inside Your Library

Open the library where you added your font. In this case, we used the Site Assets library.

From the browser address bar, copy the URL until the end of Site Assets.

NOTE: If you used another library to store your font, copy the URL that comes before 'Forms/AllItems.aspx'.

Paste the URL in a notepad.

Then, add the font file name at the end of it. 

In our case, our font file was named ‘ProximaNova-Black.otf’, making our download link look like the image below.

NOTE: In case you placed the font file in a subfolder inside the site asset, your download link will be as follows: 

https://yoursharepointsite.com/SiteAssets/subfolder_name/ProximaNova-Black.otf

Step 3: Use @font-face to build your custom font CSS

The CSS will look similar to the line of code below. Copy it and add the name of the font, direct download link, and font format. To help you, we will walk you through each detail to add.

@font-face {  
  font-family: 'Name of Font that will appear in the fonts picker';  
  src: url('Direct Download Link created in Step 2') format('font format based on extension');
}

• Name of font

Name your font according to the name you want to appear in the font picker. For example, we will name our font ‘ProximaNova Black’. Your CSS will then look like this:

@font-face {  
font-family: 'ProximaNova Black';  
src: url('Direct Download Link created in Step 2') format('font format based on extension');
}

• Direct download link

Paste the direct download link (https://yoursharepointsite.com/SiteAssets/ProximaNova-Black.otf) you created in Step 2. Your CSS will look like this:

@font-face {  
font-family: 'ProximaNova Black';  
src: url("https://yoursharepointsite.com/SiteAssets/ProximaNova-Black.otf") format('font format based on extension');
}

• Font format

Select the right font format. Listed below are font extensions and their corresponding font format:

Since our font extension is .otf, we will use ‘opentype’. Your CSS will now look like this:

@font-face {  
font-family: 'ProximaNova Black';  
src: url("https://yoursharepointsite.com/SiteAssets/ProximaNova-Black.otf") format('opentype');
}

NOTE: For more information on how to use @font-face, click here.

Step 4: Add the Custom Font to your SharePoint site

Open the page where you want to add the custom font. Then, click the cogwheel icon (1) and select Site Settings (2). 

Click ShortPoint Dashboard. 

Select Theme Builder.

Click Customize my site.

On the Theme Builder, go to Utilities (1). Then, click Custom Fonts (2) and Advanced (3).

Paste the @font-face CSS code you created in Step 3 in the field provided.

Click Apply.

That’s it! Your custom font will now appear automatically in Fonts & Typography section in ShortPoint Theme Builder.

Using your custom Font to brand your SharePoint Site

Go to Fonts & Typography section in ShortPoint Theme Builder.

Then navigate to any font settings, for example, Base where you can change the default font for the whole site.

You will find your new fonts in the fonts list under the Custom Fonts category.

Once you’re done,  click Publish.

DESIGN TIP: Want more design inspiration? Check out examples of other great improvements you can add to SharePoint pages.

Frequently Asked Questions

1. What if I added a font file, but it's not showing in the font picker?

There could be more than one possible reason, check them below:

• Make sure in the CSS the URL is surrounded by single quotation:  src: url('webfont.eot').

• Make sure that the URL  is correct: If you type it into a new browser tab and hit enter, the font should be downloaded automatically.

• Make sure you provide the right format of the font based on its extension:
  • .ttf     >     format('truetype')
  • .woff    >     format('woff')
  • .woff2   >     format('woff2')
  • .otf     >     format('opentype')
  • .eof     >     does not need a format

2. What if I want to add two or more fonts?

The same steps apply when adding another custom font. Follow Steps 1-3 from the How to Add Custom Fonts using the SharePoint Theme Builder section.

Then, paste the @font-face CSS code you created below the code you previously added.

NOTE: Make sure that there is no semicolon (;) at the end of each custom font block. Only the last @font-face CSS code should end with a semicolon.

Now, you will be able to see the custom font you added under the Custom Fonts category.

• Use the Label Design Element to highlight keywords and draw attention:

• Place special value on pieces of text with Emphasis

• Make sentences stand out with Lead:
  

DESIGN TIP: There are more ways to create unique Design Elements on your site. Check them out here. 

Related articles:

• Fonts and Typography Theme Builder Options for Modern SharePoint Sites
• Add Custom Fonts from Google Fonts to a SharePoint Site
• Add Custom Fonts from Fonts.com to SharePoint Site
• Add Custom Fonts from Adobe Typekit to SharePoint Site