How can we help?

How to Apply a Google Font to Your Portal

Stephen
Stephen
  • Updated

Purpose

In this article, Allbound Administrator's with System Settings access will learn how to apply a different font to the portal by using Google Font.

 

*Note: only Allbound Administrator users from your company with the System Settings permissions toggled on can make changes to the Advanced Settings

 

Picking your Google Font

Navigate to Google Fonts and search for a font

For this guide we are using Open Sans as our font choice

When choosing your font please pick the following sizes:

  • 300400500 700

 

 

How to Open Advanced Settings

  • On the top right of the portal click the cog wheel for Settings

  • Click the option for Advanced Settings

  • On the left side menu click Custom Code

 

 

  • You will now see the entry fields for custom code:

  • Once your code has been applied and changes have been seen by the system, click the button for Save

 

Copy & Paste Google's Code

Once your font and sizes have been chosen you will need to paste the code provided by Google Font into the Advanced Settings of the portal. 

 

 

The code below is provided from Google Font and will be placed into the Analytics/Tracking Scripts field within the Advanced Settings

 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

 

CSS Font Snippet Provided by Allbound

Copy and paste the entire code below into the Custom CSS field seen within Advanced Settings 

*Important: By default Google Font will not mark this font-family as !important; this must be added to the end of your CSS for the font to load. 


body {
font-family: "Open Sans", sans-serif !important;
}

(!important; was added to the Google Font code)

 

Final Result

Please ensure your code is placed in the same location that is shown in the screenshot below

 

By inspecting the font on the Dashboard you should now see the default font has been updated.

 

Frequently Asked Questions

Q.  What is the standard font size that we use across the portal?

A.   Our basic body text font-size is 14pt. Other font sizes are relative for things like page headings, etc.

 

If you still have questions, please reach out to your Customer Success Manager or Open a Support Ticket.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request