This article will show you how to manually add custom fonts from Adobe Fonts (formerly Adobe Typekit) to your SharePoint sites.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Choose fonts to use from Adobe Fonts
  • Step 2: Copy @import url link
  • Step 3: Open Theme Builder
  • Step 4: Paste the copied link to the Custom CSS Link field
  • Step 5: Copy the @font-face code
  • Step 6: Paste the @font-face code
  • Step 7: Use the new Fonts to brand your SharePoint Sites

Prerequisite

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Start the interactive tutorial to learn how to manually add Adobe Fonts to your SharePoint site:

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to add Adobe Fonts manually:

Step 1: Choose fonts to use from Adobe Fonts

• Start by browsing the library of fonts.
• When you find a font you like, select it. 
• Then, click </> Add to Web Project.

• (Optional) If you want more styles for the Font you selected, click Show more.

• (Optional) Select the styles you prefer.
• Once you are satisfied with your selection, click the drop-down arrow.
• Then, click Create a New Project.
• Name your new project and click Create.
• Copy the link inside href.

Step 2: Copy @import url link

• Open a new tab in your browser and paste the copied link into the address bar.
• Look for @import url and copy the link inside.

Step 3: Open Theme Builder

• Go to the SharePoint site you where want to add the Adobe Font and click the cogwheel icon.
• Select Site Contents.
• Then, click ShortPoint Dashboard.
• Click Theme Builder.
• Select [1] Classic if you have a classic SharePoint page or [2] Modern if you have a modern SharePoint page.

NOTE To learn more about the classic and modern options, check out What is the difference between ShortPoint Classic and Modern Theme Builder?

• Click Customize my site.

Step 4: Paste the copied link to the Custom CSS Link field

• Go to Utilities.
• Select Custom CSS.
• Paste the copied URL in the “Custom CSS Link” field.
• Click Apply.

Step 5: Copy the @font-face code

• Go back to the font page again and copy the code blocks that start with @font-face.

Step 6: Paste the @font-face code

• Go back to your SharePoint site again and click Back.
• Select Custom Fonts.
• Click Advanced.
• Paste the copied code inside the field provided.
• Click Apply.

Step 7: Use the new Fonts to brand your SharePoint Sites

• Go to Fonts & Typography.
• Then, navigate to any font settings. For example, Base where you can change the default font for the whole site.

• Click Publish to save all your changes.

That’s it! You now know how to add Adobe Fonts manually. Enjoy using unique fonts on your site.

Related Articles:

• Adding Custom Fonts to SharePoint Sites Manually Using ShortPoint Theme Builder
• Add Custom Fonts from Google Fonts to a SharePoint Site with ShortPoint Theme Builder
• Add Custom Fonts from Fonts.com to SharePoint Site