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 branding and site customization feature.

ShortPoint Branding and Site Customization Feature already include 800 of the most popular web fonts on the internet. And now, you can add your own fonts as well.

Before you start

• This feature is part of ShortPoint version 5.1.x.x which has been released 12, April 2017, as well as of all the following versions.
• It is supported in SharePoint 2013 and 2016 On Premise, SharePoint Online, Office 365 and Hybrid 
• This article will show you how to add custom fonts from fonts.com to your SharePoint and Office 365 sites.

Video Tutorial

Step 1: Select and Add Your Fonts to Web Project

1. Go to Fonts.com Website.
2. Search for your desired web font.
3. Then you have to add the font to your Web Project.

You can find all information you need on how to add fonts to web font project by reading the following article:

Quick Start Guide for Creating Your Web Fonts Project

Make sure to:

• Add your SharePoint or Office 365 domain to the DOMAINS list.
• You should publish your changes in your fonts.com web project.

Step 2: Copy The Script Link AND font-family names from Fonts.com Web Project Publish Options

1. Navigate to your Fonts.com Web Project.
2. Select the web project you would like to use.
3. Then Click Publish Options:

Navigate to Option 1: JAVASCRIPT

This is the only fonts.com publishing option we support at the moment.

You need to copy both (1) script link and (2) font-family names:

Step 3: Add New Fonts to your SharePoint site

1. Open ShortPoint Theme Builder: Site Settings - ShortPoint Dashboard - Site Customization - Customize my site
2. ShortPoint Theme Builder will be activated.
3. Go to Utilities - Custom Fonts - Fonts.com.
4. Paste the (1) script link in the first field.
5. Paste the (2) font-family names in the second field.
6. Click Apply.

That's it! The new fonts from your fonts.com Web Project will appear automatically in Fonts & Typography section in ShortPoint branding tool.

KNOWN ISSUE

Important: Sometimes you might notice that settings from fonts.com are not being applied to your SharePoint site. This might happen because of caching issue. To confirm, try to open your site in another browser. If you see the new settings, then this is caching issue.

To solve it, all you have to do is to add ?v=any_number to the end of the script link. 

For example, if script link is like this

<script type="text/javascript" src="//fast.fonts.net/jsapi/8e34b526-5f71-4bb6-b180-a3d2cfb120df.js"></script>

Just make it like this:

<script type="text/javascript" src="//fast.fonts.net/jsapi/8e34b526-5f71-4bb6-b180-a3d2cfb120df.js?v=12"></script>

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

1. Go to Fonts & Typography section in ShortPoint branding tool.
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.