How can we help you today?

Adding Adobe Fonts to a SharePoint Site


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

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


Add to Web Project


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


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.


link inside href


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


link inside @umport url


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.


classic or modern

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.

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


@font-face code blocks


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.


Adobe Font added

  • 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:




Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 5 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more