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. 


One of the mostly used open-source font on the web is Google Fonts and by following this article, you will be able to see simple instruction on how to add it to your page using the ShortPoint Theme Builder.



TABLE OF CONTENTS


Before we begin

  • This ShortPoint feature is available starting from ShortPoint version 5.1.x.x or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.
  • You have ShortPoint installed on your SharePoint site.
  • Make sure you are a ShortPoint user with an active license.

Video Tutorial


You may also watch this short video tutorial that we have created for you to actually see how to customize fonts in your SharePoint page. 


NOTE: You might notice some minor changes on the font websites that you can use to get the desired fonts. This is mostly related to the interface updates made recently. Please refer to the solution below for a step-by-step tutorial.




Step-By-Step Tutorial


Step 1. Select your fonts


Go to Google Fonts website.


Search (1) for the font that you like to use, or you may also browse (2) through their most popular and trending fonts:


Search or browser through the font list


Choose and click the font that you would like to use/add to your page:


Select a font style


Click Select this style to get the link for embedding the font:


Click Select this style


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


Once you have the font selected, a new panel will appear on the right side. This panel is going to give you the generated embedded code for your page.


2.1 Choose the right code


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


Check the right link


2.2 Copy the code


Before copying the code, make sure that the <link> is selected. 


Copy the code


NOTE: You can add multiple types of fonts by clicking Select this style. As you add more fonts, your embedded link will be updated with all the fonts style you selected, and you will only have to copy the same code shown above (2.2 Copy the code).


Step 3. Add new fonts to your SharePoint site


Open ShortPoint Theme Builder.


Navigate to Utilities > Custom Fonts > Google.


Select UtilitiesSelect Custom FontsSelect Google


IMPORTANT: 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.


Paste the code inside the respective field and click Apply to add the font to the font list:


Add the code and click Apply


Once you see Fonts settings were updated on the Theme Builder window, that means that the font has already been added:


Fonts settings were updated indicator


Step 4. Use the new fonts to brand your SharePoint sites


It's now time to see and select the font from the font list in the ShortPoint Theme Builder


In ShortPoint Theme Builder, go to Fonts & Typography section:


Go to Fonts & Typography


Then, navigate to any font settings, for example, Base where you can change the default font for the whole site:



NOTE: You may also check our article that will give you additional information about Fonts and Typography Theme Builder Options for Modern SharePoint Sites.


Click the dropdown option and select the font you added under the Custom Fonts Category. Once a custom font is selected, you should be able to see the changes in your site real time:


Select the font stule from the Custom Fonts list


Once you are satisfied and happy with the result, you may click Publish to save the changes.


NOTE: You may continue customizing your site in the ShortPoint Theme Builder and not press the Publish button just yet. Click the Back button to return to the previous menu. Once you are done with updating your site, do not forget to click Publish to save all changes.


After saving, you should be able to see the font that you set on your site(s), and you can change it anytime using ShortPoint Theme Builder. 



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