How can we help you today?

Adding Custom Fonts to SharePoint Sites Manually Using ShortPoint Theme Builder

Custom Web Fonts for SharePoint is finally here


Add custom web fonts from Google Fonts, Fonts.com, Adobe Typekit and others to SharePoint and Office 365 sites using ShortPoint Theme Builder.


ShortPoint Theme Builder already includes 800 the most popular web fonts on the internet. And now, you can add your own fonts as well.


TABLE OF CONTENTS


Before we begin


You can use the solution described below if:

  • You have ShortPoint installed on your SharePoint site(s);
  • You are a ShortPoint User with an active license.


The Custom Fonts feature is part of ShortPoint version 5.1.x.x which has been released 12, April 2017.

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

  • Open ShortPoint Theme Builder: Site Settings > ShortPoint Dashboard > Theme Builder >Customize my site
  • Go to Fonts & Typography > Base 
  • Search for your font in the font field, if you find it, you can already use it without doing any extra work.

Supported platforms

  • SharePoint 2013 On-Premise
  • SharePoint 2016 On-Premise
  • SharePoint 2019 On-Premise
  • Office 365 (SharePoint Online)
  • Hybrid


Note: In this article we will show you how to add custom fonts manually to your SharePoint and Office 365 sites.

Step 1: Upload Your Fonts to Web Server


You should prepare the font files and upload them somewhere. At the end, each font file should have a direct download link.

For the purposes of this article, we will use the SharePoint Site Assets Library, however you can use any other library to store your assets, including font files.


You can check this resource of fonts that are free for commercial use, download the fonts that you like and then upload them to SharePoint site.


Assuming that your font files are placed directly at the root of your Site Assets library, do the following steps to get the download URL:


1. Open your Site Assets library.

2. From the browser address bar, copy the URL until the end of Site Assets (see the following image):


3. Paste the URL, and then add the font file name at the end of it:


For example, if you uploaded a font file named my-awesome-font.woff2, to the root of the Site Assets, the download link should be as follows:


YOUR_SHAREPOINT_SITE/SiteAssets/my-awesome-font.woff2


And in case it was placed within dev/fonts folder inside site assets, the download link should be as follows:


YOUR_SHAREPOINT_SITE/SiteAssets/dev/fonts/my-awesome-font.woff2


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


You should give your new font a name and add a reference to each font file. Your CSS will look similar to this:


@font-face {
  /* the font family here could be anything, and it will appear later in the fonts picker control */
  font-family: 'MyWebFont';
  /* IE9 Compat Modes */
  src: url('path/to/your/webfont.eot');
  src:  
  /* Super modern browsers */  
  url('path/to/your/webfont.woff2') format('woff2'),  
  /* Pretty Modern Browsers */  
  url('path/to/your/webfont.woff') format('woff'),  
  /* Safari, Android, iOS */  
  url('path/to/your/webfont.ttf') format('truetype');
}


For more information on how to use @font-face to reference your custom font using CSS, click here.


Step 3: Add New Fonts to your SharePoint site

  1. Open ShortPoint Theme Builder: Site Settings > ShortPoint Dashboard > Theme Builder > Customize my site
  2. Go to Utilities - Custom Fonts - Advanced
  3. Paste your @font-face CSS code in the field
  4. Click Apply


That's it! The new fonts will appear automatically in Fonts & Typography section in ShortPoint Theme Builder.


Step 4: Use the new Fonts to brand your SharePoint Sites

  1. Go to Fonts & Typography section in ShortPoint Theme Builder.
  2. Then navigate to any font settings, for example, Base where you can change the default font for the whole site.
  3. You will find your new fonts in the fonts list under Custom Fonts category.



That's it :) Happy with your work? Just hit the Publish button.


FAQ:

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:

  1. Make sure in the CSS the URL is surrounded by single quotation:  src: url('webfont.eot').
  2. Make sure that URL to the font is correct: If you type it into a new browser tab, and hit enter, the font should be downloaded automatically.
  3. 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 format

I only have one font file, not 4 as in your example?


You can simply add a CSS to your one and only font file, but (based on the font type) it might not work across all browsers.


@font-face {
  font-family: 'MyWebFont';
  src: url('path/to/your/webfont.ttf') format('truetype');
}



Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 5 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more