Advice and answers from the eCoach Team

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.

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

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.

Step 4: Whilst keeping the Google Fonts information handy, log in to your eCoach account and head over to the Customise page and select the Advanced tab

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

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

It should look like this:

Step 6: 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:

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:

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

So that it looks like this:

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body, h1, h2, h3,h4, p, line-header-title, tile-title, h2.topic-text{
      font-family: ?;
}

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

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:

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

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

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body, h1, h2, h3,h4, p, line-header-title, tile-title, h2.topic-text{
     font-family: 'Slabo 27px', serif;
}

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 7: 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.

Did this answer your question?