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
- Video Tutorial
- Step-By-Step Tutorial
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.
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 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:
Choose and click the font that you would like to use/add to your page:
Click Select this style to get the link for embedding the font:
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:
2.2 Copy the code
Before copying the code, make sure that the <link> is selected.
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
Navigate to Utilities > Custom Fonts > 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:
Once you see Fonts settings were updated on the Theme Builder window, that means that the font has already been added:
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:
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:
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.