Thought Industries offers a variety of fonts to choose from, by default, when designing your learning site. However, you might prefer to match your branding using a specific font.
Use Case Information
Within the Design area of your platform, you have a choice to either select a font from our list of default fonts, or follow the steps below to enable a custom font that is externally linked. Furthermore, you can customize the font that is used throughout your site and/or for specific pieces of content.
Adding Your Custom Font
Before setting up your custom font on the Thought Industries platform, make sure your font is already uploaded to your own server. Your server must be HTTPS (SSL) secured.
This process includes two steps to add your custom font successfully: adding custom code and then applying your custom font in the branding area of the platform.
Note
Thought Industries is not able to host the font files because we do not own the license to the font. You also need to ensure that CORS is enabled on your server. You can find more info on CORS here.
Add Your Custom Code
- From your homepage, select Design.
- From the left menu, select Theme and then Custom Code.
- Add the custom CSS necessary to include your font. Most likely this is a
@importdirective such as@import url("https://www.example.org/external-font.css");. - Alternatively, if you have a
<link>tag or a script, you can add that in Settings > Integrations > Tracking Scripts.
Apply Your Custom Font
- From your homepage, select Design.
- From the left menu, select Theme and then Branding.
- Check the Use externally linked font-family? box for either Font or Header Font, depending on where you want the font to apply. Enter the name of the font here, and ensure that it matches the CSS you've added to the platform.
- Click Save.
Tip
If the font doesn't appear to display after following these steps, you can open up the Chrome Developer Tools and refresh the page to view any error messages. More information on the Chrome Developer Tools can be found here.