How to use Google Fonts in your vendor-hosted Moodle installation
Are you tired of the same old locally installed fonts that shipped with your Windows PC or Mac? Have you ever wanted to display text in your vendor-hosted Moodle installation using your favourite Google font and know that the font you see on the screen in front of you will be exactly the same font that the user will see when they look at the text? But how do you do this if your Moodle is not self-hosted and you don’t have access to the backend?
If your Moodle login gives you access to Site administration then you should be able to add the custom CSS you need in order to display any number of Google fonts in Moodle.
In this tutorial you’ll learn how to add Google fonts to your vendor-hosted Moodle installation then use those fonts to style text in a Page, a Book or a Lesson.
The first step is to reference the CSS stylesheet you need within Moodle. You will do this by inserting a small piece of custom HTML into your Moodle installation. This piece of code will then appear in the <head> tag in every page of your Moodle.
In this example below, you will need to replace FONTNAME with the name of the Google font you would like to display.
Step 1
- In Moodle go to Site administration > Appearance > Additional HTML
- In the Within HEAD box, type in the following text replacing FONTNAME with the font you would like to use and click the Save button:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FONTNAME&display=swap">Requesting different styles of a font
By default, you will get the normal style of a particular font. But what if you want to use and display another style, such as italics or bold?
For example, Fira Sans Condensed is available in 18 different styles including Fira Sans Condensed Light and Fira Sans Condensed Light Italic to Fira Sans Condensed Extra Bold and Fira Sans Condensed Extra Bold Italic.
Let’s say you wanted to add all 18 styles of Fira Sans Condensed to your Moodle installation. Here’s what your link would look like:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap">Requesting multiple fonts
You can request multiple fonts by appending your request with a | symbol followed by the name of another Google font. Let’s say you want the bold italic version of the Lato font and the bold style of the Roboto Condensed font; our link would be:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:bolditalic|Roboto+Condensed:700&display=swap">Step 2
- In Moodle, open the Page containing the text you would like to style
- Go to Page module administration and click Edit settings
- Go to the Page content box and click the HTML button in the menu immediately above the Page content box
- Locate the piece of text that you would like to apply your Google font to
- Change
<p>YOUR TEXT</p>or<h1>YOUR TEXT</h1>to<p style="font-family: Fira Sans Condensed Light">YOUR TEXT</p>or<h1 style="font-family: Fira Sans Condensed Extra Bold">YOUR TEXT</h1> - Click the Save and display button.
Graham Clark is the Senior Learning Designer at Graccon Learning Solutions a boutique educational design company. He and his team work closely with schools, universities, TAFE colleges and other registered educational institutes to help them design, develop and deliver student-centred learning experiences that are memorable, engaging and will help to improve student outcomes. You can connect with Graham on LinkedIn.
