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.


Install ShortPoint before you can proceed with this solution.



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
  • 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 - Site Customization - 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.

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


Question: How to get a direct download link to an item inside Asset Library?

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 SiteAssets ( see following image )


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


So for example, if you uploaded a font file named my-awesome-font.woff2, to the root of the SiteAssets, 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 something like 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 - 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.


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 quotations 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');
}