How to Customize Fonts for the Learner Experience

System Admins can further customize the look and feel of their Learner Experience by configuring the Font for the Header and Body.  The chosen Header and Body Fonts will display throughout the Learner Experience except for the third-party checkout page where users enter their payment information. 

This article guides System Admins on how to edit the Fonts and also shares some considerations when selecting your Header and Body Fonts. 

Custom Font Notes

Only Google Fonts are supported at this time.  There are currently over 950 available as noted in this articleIf you use a Font that is not recognized it will fall back to the default Fonts used. Additionally, solely Font family names are supported, their styles are not.

Note that you can only add one Font for the Header and one for the Body.

 

Instructions

Step Action Image 
1.

Before customizing the Fonts, review Google Fonts and determine which Font you will use for the Body and the Header.  Consider these points when choosing a Font for the:

  • Header
    • Choose a Font that is consistent with your branding and that you use in your marketing materials.
    • If you do not have branding requirements, most Serif and Sans Serif Fonts as well as some Display Fonts can work well.
    • Whatever Font you choose for your Header, consider choosing a thicker Font.
  • Body
    • These Fonts should focus more on usability (i.e.,how legible the Font is for all users) rather than flare.
    • Most Sans and Serif Fonts are acceptable.
    • Avoid Handwriting, Display, Italics and very thin Fonts.
google.png 
2.

Once you select your Fonts, sign in to the LMS and select the Menu icon from the upper right corner of the Learner Experience.

image_1a.png 
3.

Scroll down and select Manage Templates.

image_2a.png
4. Select the Theme tab with Color and Font options that can be used to customize the look and feel of your Learner Experience.    font1.png
5.

Scroll until you see Fonts. Click on the downward arrow to the right of the word Fonts to display the editing space for these options.

 font_2.png
6.

Type in the chosen Header Font Name without any punctuation. (e.g., Raleway)

Remember that the Header font will be applied to all page and content headings such as Course and Transcript headings so you want to select a Font that is easily readable by your users.  

font_3.png 
7.

Then, type in the selected Body Font Name without any punctuation.  

Remember, this Font will be applied to all body texts such as Course Descriptions, News Articles, and Transcript table values so you do want to consider the legibility of this Font.  

font_4.png 
8.

Click on the Save button on the lower right hand side of the page to save your configurations.  All pages of the Learner Experience will be updated to use the Fonts except for the third-party checkout page where users enter their payment information.

image_8a.png 
9.

Return to the Learner Experience and view the Fonts to make sure that the Fonts are legible. If they are not legible or appear very large or small (the default sizes cannot be changed), return to step 1 and begin the process again.

font5.png 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.