Code Snippet Explanation

This code snippet allows you to add a custom font to a Skilljar Theme that gets applied globally. Before installation, you'll need unique URLs to the location the font is hosted for a light, regular, and bold version of the font. You'll know you have the correct URLs if you can enter them into your browser and the font immediately starts to download.

Installation Instructions

Step 1: Navigate to the Code Snippets section of your domain Theme and paste the below code at the bottom of the Global Head Snippet. 

Step 2: Edit the font-family and URL variables for light, medium, and bold to point to the custom font name / hosted location. Don't forget to add the custom font name you've defined to the bottom of the snippet where it gets applied globally using CSS.

Snippet Code - Add to Global Head Snippet in Theme:

<!-- START Add Custom Font -->
<style>
/* To configure this snippet, replace the word "Example" below everywhere you 
see it with your font name and be sure the quotes are still on either side. 
Next, replace the "PLACE_FONT_URL_HERE" text with URLs that point to your font files
for light, medium, and bold respectively. 
*/  
  
/* light font */
@font-face {
  font-family: "Example";
  src:  url(PLACE_FONT_URL_HERE);
  font-weight: 200;
}
/* medium font */
@font-face {
  font-family: "Example";
  src:  url(PLACE_FONT_URL_HERE);
  font-weight: 400;
}
/* bold font */
@font-face {
  font-family: "Example";
  src:  url(PLACE_FONT_URL_HERE);
  font-weight: 600;
}

/* Apply custom font globally except to font awesome icons */
*:not(.fa) {
 font-family:"Example", sans-serif !important; 
}
</style>
<!-- END Add Custom Font -->