Using Custom Font in Your LMS

Academy of Mine's front and back end by default use the "Roboto,sans-serif" font. If you wish to use your own or a custom font instead throughout the platform, you've come to the right place! This tutorial will walk you through the three steps to get everything set up. The font change made here will apply globally across the platform, so keep that in mind! 

Note: To add a Custom Font in the platform, it must be stored on a URL that is available publicly. For example, Google Fonts.

Step 1: Adding the Base CSS Code for importing Fonts

  1. From the Admin Dashboard, choose Branding, and then Custom Styling
  2. Once on the Custom Styling page, add the following CSS Code in the textbox: 
@import url('');

body, .tooltip, .popover {
	font-family: '', ;
}

The result should look something like this:

Step 2: Getting the Custom Font URL

Awesome, now we're ready to add the font URL and then decide the font family from it. As noted above, to add a Custom Font in the platform, it must be stored on a URL that is available publicly. For example, Google Fonts are typically stored on URL such as: https://fonts.googleapis.com/css2?family=Open+Sans.

In this example, we will be using the "M PLUS 1 Code" font hosted on Google Fonts since they are a popular choice. This tutorial is applicable to any font hosted on the internet. 

  1. Once on the Google Fonts page, we can select which styles we'd like to add/remove by clicking "Select" or "Remove" as seen below: 
  2. Once we selected the styles we want, we can now copy the font link and the font family. To do so, click the icon in the yellow box as seen in the image below: 
  3. You should now see this sidebar open up:
  4. Make sure the yellow "@import" box is selected. Please refer to the images directly above and below this text. Return to AOM, and replace the exact content inside the red box on Google Fonts to red box on AOM LMS; do the same for the exact content inside the blue box:

Step 3: Saving Changes

  1. Your code should look somewhat like the following within AOM: 
  2. Be sure to click "Save Changes". Now refresh your page. The textbox should look like the following image:
  3. Here is the text of the final code from this tutorial:
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100;400;420;600&display=swap');

body, .tooltip, .popover {
	font-family: 'M PLUS 1 Code', sans-serif;
}

After saving changes, you should now see the new Font showing up in the LMS. Note that the font change takes place globally!

Yay! We're done. If you run into any issues while performing this tutorial or have any questions, please contact our support team at help@academyofmine.com