Add custom fonts to your training site with CSS

Avatar
by Macz Norton
Follow

You can add custom fonts to your training site by adding custom CSS. To add custom font(s), you'll locate or generate a URL for the font file, identify the specific elements in your training site, and add a code block in the "Global Head Snippet" to load the font and apply the changes.

 

In this article:

 

Related Articles: 

Customizing your Site: CSS and Javascript - Element Targeting Overview

Customizing Your Training Site with CSS and JavaScript

 

Step 1: Locate or generate a URL for the font file through a service such as Google Fonts or Adobe Typekit.

Google Fonts

Google Fonts provides access to over 900 open licensed fonts. To find a font and retrieve the font-specific code block:

  1. Choose the font(s) you'd like to use in your training site.
  2. Click the plus (+) sign on the font(s) you'd like to add.
  3. Once you have selected your font(s), click the tab at the bottom of the browser window.
  4. Select the @IMPORT tab.
  5. Copy the code in between the <style> tags from the code block.
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Screen_Recording_2019-05-28_at_05.12_PM.gif

 

Adobe Typekit

Adobe Typekit is a paid font hosting solution for Creative Cloud subscribers. 

Learn more: Instructions to embed fonts using Adobe Typekit.

 

Step 2: Identify the specific elements in your training site to which the new font should be applied.

To ensure that the custom fonts are applied to all of the elements that you'd like, you'll need to call out each element and the associated font you'd like applied to it in the code block.

/* Example 1: Changing font for catalog tiles */ 
#catalog-courses {
font-family: 'Roboto', sans-serif;
}

/* Example 2: Changing font for course content */
#skilljar-content {
font-family: 'Roboto', sans-serif;
}

 If you are looking to change the font across ALL elements and HTML content across the training site (including HTML Lessons), you can use the following snippet to target all elements :

<style>
h1, h2, h3, h4, h5, h6, div, p, span, button, a, input, select, option, textarea {
font-family: 'FONT-NAME-FROM-IMPORT', sans-serif !important;
}
</style>

 

Step 3: Add a code block in the Global Head Snippet to load the font and apply the changes to the desired elements of your training site.

  1. Combine your code snippets into the final code snippet (see "Example Code Snippet" below).
  2. From the "Theming" dropdown in the Dashboard left navigation bar, click "Themes."
  3. Click the name of the theme you want to add the custom CSS.
  4. Scroll down to the "Code Snippets" section and expand by clicking the plus (+) sign.
  5. Input your custom code into the "Global Head Snippet" field.
  6. Click Save or Save and Continue Editing.
/*Adding custom fonts to different elements of your training site */

<
style> /* Location of the font file(s) */ @import url('https://fonts.googleapis.com/css?family=Roboto'); /* Example URL for Google Fonts */ @import url("https://use.typekit.net/xxxxxxx.css"); /* Example URL for Adobe Typekit */ /* Example 1: Changing font for catalog tiles */ #catalog-courses { font-family: 'Roboto', sans-serif; } /* Example 2: Changing font for course content */ #skilljar-content { font-family: 'Roboto', sans-serif; } </style>

Screen_Shot_2019-04-25_at_9.53.51_AM.png

 

Frequently asked questions

What standard fonts are available to use on a training domain?

Andale Mono, Arial, Arial Black, Book Antiqua, Courier New, Georgia, Helvetica, Lato, Open Sans, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

Screen_Shot_2019-06-12_at_9.20.32_AM.png

 

Will custom fonts appear in the font menu of the HTML text editor in the Dashboard?

No. Custom fonts will not appear within any of the text editors on the Dashboard. However, they will be rendered when viewed from the training site.

 

 

Powered by Zendesk