Custom Web Fonts for SharePoint is finally here
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
- Custom Web Fonts for SharePoint is finally here
- Before we begin
- Supported platforms
- Step 1: Upload Your Fonts to Web Server
- Step 2: Use @font-face to build your custom font CSS
- Step 3: Add New Fonts to your SharePoint site
- Step 4: Use the new Fonts to brand your SharePoint Sites
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.
- SharePoint 2013 On-Premise
- SharePoint 2016 On-Premise
- SharePoint 2019 On-Premise
- Office 365 (SharePoint Online)
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.
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 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:
And in case it was placed within dev/fonts folder inside site assets, the download link should be as follows:
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:
/* the font family here could be anything, and it will appear later in the fonts picker control */
/* IE9 Compat Modes */
/* Super Modern Browsers */
/* Pretty Modern Browsers */
/* Safari, Android, iOS */
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
- Open ShortPoint Theme Builder: Site Settings > ShortPoint Dashboard > Theme Builder > Customize my site
- Go to Utilities - Custom Fonts - Advanced
- Paste your @font-face CSS code in the field
- 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
- Go to Fonts & Typography section in ShortPoint Theme Builder.
- Then navigate to any font settings, for example, Base where you can change the default font for the whole site.
- 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.
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:
- Make sure in the CSS the URL is surrounded by single quotation: src: url('webfont.eot').
- 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.
- 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.
src: url('path/to/your/webfont.ttf') format('truetype');