Custom Web Fonts for SharePoint and Office 365 are finally here
Add custom web fonts from Google Fonts, Fonts.com, Adobe Typekit and other resources 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.
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.
If you are a new user and don't have any of these, you can start your journey with ShortPoint here.
- SharePoint 2013 On-Premise
- SharePoint 2016 On-Premise
- SharePoint 2019 On-Premise
- Office 365 (SharePoint Online)
One last check
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.
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 for 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:aa
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.
Feeling inspired? See examples of other great improvements you can add to SharePoint pages.
1. What if 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
2. What if I only have one font file, not four, 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');
Interested to make SharePoint fonts and typography brighter?
Here are some ideas:
- use the Label element to highlight key words and draw attention:
- put special value on pieces of text with Emphasis:
- make sentences stand out with Lead:
Check out more examples of beautiful and useful elemets for SharePoint and Office 365.