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.
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 ‘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 ’, a ‘CDN’ although doesn’t have to be. One such ‘service’ is ‘ Google Fonts ’ 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 ’ 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 ’ method which we will be using.
On 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 <head> 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):
1$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’. And that’s it!
If you find that the font appears to be a little small, then you can always add:
1$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:
1.maincalendar .calendarmonth td .day-number-circle .day-number {
2 width: auto;
3}
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 (A little bit of CSS, part one and 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.