Custom CSS and how to target general copy.

Hi ​@TommyBrown 

Can I confirm if you have checked the following page learn/manager/microsite/branding which allows you to change the font of text and headers.
If this is not what you are looking for please let me know and if you could give me an example it would be really helpful

Kind regards

Jon

Yes I was but don’t I still need to call the CSS? I used adobe to make the fonts I want into web ones but they gave me html and css code. 

Hi ​@TommyBrown 

Apologies if I am not fully understanding what youa re trying to do.

Are you saying you want to use fonts that are not one of our default fonts, and you want to know how to add them into the platform and have them used as default for the Body and Header text?

Thanks in advance for the clarification.

Jon

Hi ​@TommyBrown 

I came across this article and thought it may be what you are looking for, please let me know if this helps.

----------------------------------

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 Site 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

1. From your homepage, select Site > Site Builder.
2. In the left menu, select Custom Code.

   

3. Add the custom CSS necessary to include your font. Most likely this is a @import directive such as @import url("https://www.example.org/external-font.css");.
4. Alternatively, if you have a <link> tag or a script, you can add that in Settings > Connections > Tracking Scripts.

   

    

Apply Your Custom Font

1. From your homepage, select Site > Branding.
2. 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.
3. 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.