How can we help you today?

Add Custom Fonts from Google Fonts to a SharePoint Site with ShortPoint Theme Builder

By using ShortPoint Theme Builder, you will be able to choose from 800 of the most popular web fonts on the internet and also add custom fonts (Google Fonts, Fonts.com, Adobe Typekit, etc.) to your SharePoint page. 


This article will demonstrate how to add Google Fonts to your page using the ShortPoint Theme Builder.


TABLE OF CONTENTS


Before we begin

  • You have the latest version of ShortPoint SPFx installed on your SharePoint site.
  • Make sure you are a ShortPoint Designerwith an active license.

Interactive Tutorial

Go through the interactive tutorial to learn how to add Google Fonts:



Step-By-Step Tutorial

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


Step 1:  Select your font

  • Go to Google Fonts
  • Use the search bar to look for the font that you would like to use. You can also scroll or use the filters to browse fonts. 
  • Once you find the font you are looking for, click it.
  • Then, scroll down and click the plus icon to select all the styles you want to use.

plus icon


NOTE: You can add multiple types of fonts by clicking the plus icon. As you add more fonts, your embedded link will be updated with all the fonts style you selected.

Step 2: Copy the Google embed code for your selected font(s)

  • By default, when you select a font, you will be given 3 links under the Use on the web section. Copy the link located at the bottom of the box as shown below:


third link


Step 3: Open ShortPoint Theme Builder

  • Go to the SharePoint site where you want to add the font and click the cogwheel icon.


cogwheel icon

  • Select Site Contents.
  • Then, click ShortPoint Dashboard.
  • Select Theme Builder.
  • Choose [1] Classic if you are using a Classic SharePoint site or choose [2] Modern if you are using a Modern SharePoint site.


classic or modern

  • Select Customize my site.

Step 4: Add the Google Font

  • Navigate to Utilities.
  • Then, click Custom Fonts.
  • Choose Google.
  • Paste the code in the field provided.
  • Click Apply.


NOTE: You should only have one link to paste on the code section for all the fonts that you have chosen in the Google Fonts website.

Step 5:  Use the new font to brand your SharePoint sites

  • Go back to the main menu of the ShortPoint Theme Builder. 
  • Navigate to Fonts & Typography.
  • Then, select any font settings. 
  • You will now see the new font under Custom Fonts:


custom font

  • Once you’re satisfied with the result, click Publish to save the changes.


NOTE: For more information, you may also check Fonts and Typography Theme Builder Options for Modern SharePoint Sites.


Congratulations! You can now use Google Fonts to design your SharePoint sites.


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