Add custom fonts to your training site with CSS

Add custom fonts to your training site by adding custom CSS. To add custom font(s), locate or generate a URL for the font file (such as from Google and Adobe), 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.

Related Articles: 

Customizing your Site: CSS and Javascript - Element Targeting Overview

Customizing Your Training Site with CSS and JavaScript

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) or font families you'd like to use in your training site.
2. Select the plus (+) sign on the font(s) you'd like to add.
3. Once you have selected your font(s), select 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');

Adobe Typekit

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

Learn more: Instructions to embed fonts using Adobe Typekit.

Note: You can also use any other custom font hosting, as long as you can generate a URL for the font files. 

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>

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, select "Themes."
3. Select the name of the theme you want to add the custom CSS.
4. Scroll down to the "Code Snippets" section and expand by selecting the plus (+) sign.
5. Input your custom code into the "Global Head Snippet" field.
6. Select 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>

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.

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.