eCoach is currently undergoing a significant design overhaul which
means that some functionality may be slightly different to the descriptions
in our FAQS / knowledge base. If you have a question that you can’t find the
answer to please contact using the chat window (bottom right)

Can I add custom fonts to my campus?

Absolutely. You can choose any Google font and add it to your campus using the Custom CSS/Less feature. It’s a little complicated, so we’ve laid out the required steps in as much detail as possible below.

Step 1: Start by going to the Google Fonts page and finding the font you’d like to import. Once you’ve found the font you’d like to import, click on the red plus sign next to its name.

plus sign

Step 2: Now click on the ‘Family Selected’ box that appears at the bottom of your screen.

family selected

Step 3: A box will pop up that tells us how to embed this specific font within our campus. We’re interested in the information in the box titled ‘Specify in CSS’, shown below.

specify in CSS box

Step 4: Whilst keeping the Google Fonts information handy, log in to your eCoach account and head over to the Account > Customise menu option.

customise

Step 5: Now click on the ‘Custom CSS / Less’ box.

CSS box

Step 6: Paste the following text into your Custom CSS / Less box:

@import ‘https://fonts.googleapis.com/css?family=?’;
body, h1, h2, h3,h4, p, line-header-title, tile-title, h2.topic-text, ng-scope{
font-family: ?;
}

It should look like this:

custom css:less box

Step 7: Now we need to go back to our Google Fonts information and add it to our CSS code. Firstly, copy the first part of your ‘font family’ text, highlighted here:

first part highlighted

In this case, the text is Slabo 27px (don’t include the hyphens that Google Fonts shows you). Add that text instead of the first question mark in your eCoach Custom CSS / Less box, highlighted here:

first question mark highlighted

So that it looks like this:

slabo included

Now we need to import the rest of our Google Fonts information. To do this, copy all of your ‘font family’ information, highlighted below.

both parts highlighted

For this section, we need all the text shown. In this case, that text is ‘Slabo 27px’, serif;. Copy that and paste it in place of the second question mark and the semicolon next to it in your eCoach Custom CSS / Less box, shown below:

final q mark

So that your Custom CSS / Less box looks like this:

finished CSS

Note: Make sure you only change the text shown, and do not include any extra spaces or letters, or your CSS output won’t work.

Step 8: Click the ‘Save’ button at the bottom of screen to activate your changes. You’ll see the font on the page change as it is refreshed to your new Google font. This process can be repeated for any Google Font you need.

in CustomisationLMS Tags: custom fontcustomisationfontgoogle font

Related Articles