How to add custom fonts in SPO

This post is a contribution from Jing Wang, an engineer with the SharePoint Developer Support team

 

Recently I assisted a SPO customer, who wanted to add custom web fonts to their SharePoint Online sites both as overall default font and custom rich text font when editing individual site pages.
With help from our Escalation Engineer, Westley Hall, we were able to implement the customizations to meet the above requirements.

 

Here are the different types of customizations we can do around the custom fonts  :

 

Changing the default fonts globally through custom fonts in Font Schemes used in Composed looks:
Custom fonts can be defined in the font scheme (.spfont file) for a SharePoint site. The font scheme defines the fonts that are used in four areas: title, navigation, heading, and body. When you change to the custom font in this way, all web pages in the site will use it so the site have a consistent font for main content areas.

Here are detailed steps:

 

Step 1, you need to get custom font with four file extensions - .eot, .svg, .ttf, .woff files.
I used a sample font (.tff file) from Google (https://fonts.google.com/), and retrieved other file extensions through this font-face generator (https://everythingfonts.com/font-face ).

 

 

 

Download will give you a fonts.zip file, in there you can find .ttf file for the font.
Then you can upload the .ttf file to https://everythingfonts.com/font-face

 

 

Then click Convert button, you will get a zip file that includes the needed file extensions:

 

 

 

Step 2, Upload the four files to a library in the SharePoint site, for example, themes library 15 folder at http://siteurl/_catalogs/theme/15.
In my example, it is https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/:
So the four files have the paths:
https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.eot
https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.woff
https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.ttf
https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.svg

 

Step 3, Create a custom font scheme file based on one of those out of box fontscheme*.spfont files, like, “fontscheme002.spfont”:

A portion of the custom font scheme file to define custom font for body area:

customfontscheme.spfont:

 

<s:fontSlot name="body"> 
<s:latin typeface="BalooChettanRegular" eotsrc="https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.eot" woffsrc="https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.woff" ttfsrc="https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.ttf" svgsrc="https://mycompany.sharepoint.com/sites/pub/_catalogs/theme/15/BalooChettanRegular.svg" largeimgsrc="" smallimgsrc="" />
			<s:ea typeface="" />
			<s:cs typeface="Segoe UI" />
			<s:font script="Arab" typeface="Segoe UI" />
			…			
</s:fontSlot>

 

For reference, see the Web fonts area in this article - https://docs.microsoft.com/en-us/sharepoint/dev/general-development/color-palettes-and-fonts-in-sharepoint

 

Step 4, in composed looks, you can replace with above fontscheme file for Font Scheme URL setting or you create a new look and use above fontscheme file as Font Scheme URL.

 

Step 5, Choose the composed look modified or created in Step 4 as current site’ Look:
Site Settings -> Change the look.

 

 

 

Then your site will use the custom font!
Actually, above page already has the BalooChettanRegular web font.

 

 

Adding custom font in "FORMAT TEXT" fonts drop down menu when editing a page's text area:

 

 

This functionality gives you the flexibility to use your custom font for text you entered when edit the
page in UI.

Step 1, Create a custom css file, for instance, customfonts.css:
I added two custom fonts: “Fascinate Inline” and “Indie Flower”:

 

 

 

@import url("https://fonts.googleapis.com/css?family=Fascinate+Inline");
.ms-rteFontFace-16
{
font-family: 'Fascinate Inline', cursive;
}

@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
.ms-rteFontFace-17
{
font-family: 'Indie Flower', cursive;
}

 

 

 

NOTE: SharePoint use number about 1-14 for oob rteFontFace , so you just use higher numbers.

 

Step 2, Upload above custom css to style library in the site.

 

You need to check in the file after you upload it if you do upload to Style Library in a publishing site.

 

 

 

Step 3, Set the custom font css as the Alternate CSS URL for the site in Site Settings-> Site Master Page Settings:

Now you have two added custom fonts in fonts dropdown menu under FORMAT TEXT tab!

 

 

I also would like to complete this article with a common customization of custom web fonts in web pages, this is on the page’s markup/source code level, which is generic, not SharePoint specific:

 

** Add custom fonts in your site pages’ source code directly:

There are different ways to do this, here is one article which has good explanation and sample code:
https://insights.dice.com/2013/05/13/adding-custom-fonts-to-your-web-pages/

 

I tested the CSS3 solution in the article, it worked well in SharePoint site:
Following is that portion of the article for your convenience:

 

CSS3 introduced the @font-face rule. This allows you to specify the name of a font face and the URL of where it can be found. Different browsers support different font formats, including but not limited to: ttf, otf, eot, svg and woff.
To use the @font-face complete the following steps:
• Obtain, create or have created your custom font file.
• Upload your font files to your server under your Web root.
• Add code like the following to your CSS files or within the

HTML header:

 

 

 

@font-face
{
 font-family: myFancyFont;
 src: url('myFancyFont.ttf'),
 url('myFancyFont.eot');
}

 

 

 

• Put the new font in your style sheet as shown in the following example:

 

 

 

h1  { font-family: 'myFancyFont', Times, serif; }

 

 

 

 

• Then in the html markup, your h1 tag can use the custom font:
Below is simplified html file with all needed components:

 

 

 

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v10/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
}
H1 body {
        font-family: 'Tangerine', serif;
        font-size: 16px;
      }



Hello World in Custom Font!