Network fonts
Introduction
Ever wanted to change the font of your Moodle installation, but don’t want to change the code? If so, read on.
Disclaimers
Names / logos can be trademarks of their respective owners. Please review their website for details. I am independent from the organisations mentioned and am in no way writing for or endorsed by them. The information presented in this article is written according to my own understanding, there could be inaccuracies, so please do undertake your own research. The featured image is my copyright, please don’t use without my permission.
Background
The idea for this post has come from moodle.org/mod/forum/discuss.php?d=466128 – where I realised that there was not many guides (at the time of typing) out there that demonstrated how you could do this with Moodle.
I have previously written about how fonts can be added by serving the font files yourself in www.elearningworld.org/a-little-boost, so what is really different here? Well the font files and CSS definitions are served by another server that you don’t control, typically one that’s a part of a ‘Content delivery network’ (https://en.wikipedia.org/wiki/Content_delivery_network), a ‘CDN’ although doesn’t have to be. One such ‘service’ is ‘Google Fonts’ (https://fonts.google.com/) which I understand to be a CDN but couldn’t find a specific reference.
The advantages of this approach are:
- You can use the user interface to use the font(s) and don’t have to change your code.
- You don’t have to serve the fonts yourself.
- You don’t have to worry about optimising delivery nor licensing, fonts.google.com/about – as long as you clearly agree to Google’s terms and conditions.
The disadvantages are:
- You’re reliant on a third party who’s availability is out of your control, and indeed the availability of the chosen font.
- Privacy, such as GDPR (gdpr-info.eu) could be an issue for you, there is developers.google.com/fonts/faq/privacy – however you should be sure that how you use the service is legal in your location. It could be that you have to get permission from the user before the font is served.
How to
Google Fonts itself has its own guide: developers.google.com/fonts/docs/getting_started which is a good start to understand what goes on, but currently doesn’t describe the ‘@import’ (developer.mozilla.org/en-US/docs/Web/CSS/@import) method which we will be using.
On https://fonts.google.com/ search for the font(s) you want (I’ve chosen ‘Nunito Sans’), click on the ‘Get font’ button, then ‘Get embed code’. On the left of the ‘Embed code’ page you’ll be able to tailor the varieties you want. I suggest selecting only what you really need.
Then on the centre right at the top, select the ‘Web’ tab, then the ‘@import’ radio button option. This will give you the ‘Embed code in the of your html’ that we’ll need to place in the ‘Within HEAD’ (‘additionalhtmlhead’ – the easiest way to find it is to use the search box on this name) setting in Moodle:
And ‘Save changes’. This will load the required CSS definition that defines the font and its supporting file(s). Next, copy into a plain text editor (not a word processor):
$font-family-sans-serif: 'YOUR FONT NAME', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
replacing ‘’YOUR FONT NAME’’ with your main font name as you’ll see on the ‘Embed code’ page within the ‘font-family:’ of ‘CSS class for a variable style’. Then go to the Boost theme ‘Raw Initial SCSS’ (‘scsspre’) setting and add that changed text, being:
And ‘Save changes’ again. This specifies the main font to use. This is the same as on ‘A little boost’ (www.elearningworld.org/a-little-boost). And that’s it!
If you find that the font appears to be a little small, then you can always add:
$font-size-base: 1.25rem;
to the ‘Raw Initial SCSS’ (‘scsspre’) setting which will increase the size of the font (as greater than one), where you can find out about ‘rem’ and other units on developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units. Note: there are discussions about font size units on web pages that’s beyond the scope of this article.
I did find that this messed up the calendar, so had to then add:
.maincalendar .calendarmonth td .day-number-circle .day-number {
width: auto;
}
to the Boost theme ‘Raw SCSS’ (‘scss’) setting. This was worked out by trial and error using the web browser development tools as can be seen in the two part ‘A little bit of CSS’ series (www.elearningworld.org/a-little-bit-of-css-part-one and www.elearningworld.org/a-little-bit-of-css-part-two).
Conclusion
Using third party network based fonts is an easy way to enhance your Moodle installation. You just need to be aware of the disadvantages.
Please put your thoughts in the comments.
- Static publishing – 16th April 2025
- Network fonts – 16th March 2025
- Static translate – 16th February 2025
That’s very interesting.
This would appeal to local / client site administrators – as they don’t need to get involved in the back-end of Moodle and server.
As you say, licensing should be taken seriously though.
I also wonder if there is any performance overhead when taking this route ?
Thank you for your comment. Good question about performance, I think that it depends on specific circumstances. In that where the client is accessing from in relation to your and Google’s servers, and the reduced workload on your server by not serving the font in the first place, and if Google have faster servers with at a time where they’re not overloaded. So many factors to consider. Thus could be quicker or slower.