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. 
  • Support SharePoint 2013 and 2016 On Premise, SharePoint Online, Office 365 and Hybrid 
  • This article 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.

Possible places: SharePoint Site Asset Libaray


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 something like this:


@font-face {
font-family: 'MyWebFont';
/* IE9 Compat Modes */
src: url('webfont.eot');
src:  
/* Super Modern Browsers */  
url('webfont.woff2') format('woff2'),  
/* Pretty Modern Browsers */  
url('webfont.woff') format('woff'),  
/* Safari, Android, iOS */  
url('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 branding feature: Site Settings - ShortPoint Dashboard - Site Customization - Customize my site
  2. ShortPoint Branding Feature will be activated
  3. Go to Utilities - Custom Fonts - Advanced
  4. Paste your @font-face CSS code in the field
  5. Click Apply



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


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.