This document will show you how to add custom fonts manually from Adobe Typekit to your SharePoint and Office 365 sites.

Step 1: Choose fonts to use from Adobe Typekit

1. Start by browsing the library of fonts.

2. When you find a font you like, click the </> button to add the family to a web project.
   You can also click on the font name to open the family page and see all of the font weights and styles that are available to use. Then click </> Add to Web Project at the top of the page to add the family to a web project.
   
   
   

3. In the Add fonts to a Web Project window, you'll name your web project and decide which fonts should be included.
   
   
   
   
   
   

4. Copy the link of the stylesheet displayed in the popup like the image below
   
   
   
   

5. Open a new tab in your browser and past the copied link
   
   

   

6. Search for @import url in the opened stylesheet and copy the URL between the quotes like the image below
   
   
   

Step 2: Add the font to ShortPoint

1.  Open ShortPoint Theme Builder: Site Settings - ShortPoint Dashboard - Theme Builder - Customize my site.

2. ShortPoint Branding Feature will be activated.

3. Go to Utilities - Custom CSS.

4. Paste the copied URL in the field “Custom Css Link”.

5. Click Apply.
   
   
   
   

6. Back to ShortPoint - *Custom Fonts* -  Advanced panel and paste your @font-face CSS code in the field

7. Open the stylesheet again and copy the rest of the code blocks start by @font-face
   
   

8. Back to ShortPoint - Advanced panel and paste your @font-face CSS code in the field

9. Click Apply
   
   

Step 3: 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