A little boost
Introduction
When a client contacted me asking for assistance in adding a font to the Boost theme, I created a solution for them, one that is quite straightforward to implement. I thought it would make a good post, so with their permission here it is. I’ve not written about fonts in a while and this brings me back to my roots of writing for eLearningWorld.
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 technical inaccuracies, so please do undertake your own research. The featured image is my copyright, please don’t use without my permission.
The font
To create the example solution I went browsing on my favourite site, Font Squirrel, and discovered ‘Edge Display’, www.fontsquirrel.com/fonts/edge-display by Grzegorz Samson. It doesn’t come with web fonts, but does come with an ‘OpenType’ (en.wikipedia.org/wiki/OpenType) file and is ‘SIL Open Font License v1.10’ licensed (www.fontsquirrel.com/license/edge-display). I’m a fan of sans serif (en.wikipedia.org/wiki/Sans-serif) fonts and Edge Display looks distinctive and different, essentially it caught my eye and stood out from the rest.
A few changes
First download the font, e.g. www.fontsquirrel.com/fonts/download/edge-display and get a ‘zip’ file. Extract the contents to get the font files and license:
There are two styles, regular and bold. These will equate to the ‘font-weight’ CSS attribute that we will employ in a moment. According to developer.mozilla.org/en-US/docs/Web/CSS/font-weight, ‘normal’ is ‘400’, which we can judge to be ‘Regular’ and ‘bold’ is ‘700’. We could use the words and not the numbers, but for another reason which I’ll explain when we get there, we’ll stick with the numbers.
In your Moodle installation on the server, create a folder ‘fonts’ in ‘theme/boost/’ and put all of the extracted files there, including the license as that belongs with the fonts. This folder is where the files will be served from by the server using CSS that is generated from SCSS using a Moodle specific method of defining the URL, as we’ll be using the ‘theme_boost | scss’ user interface (UI) setting to tell Moodle where the font is. Instead of hard coding the URL, then Moodle’s CSS pre-processor looks for a placeholder wrapped in two square brackets, ‘font:theme’, for example ‘[[font:theme|EdgeDisplay-Regular.otf]]’. I couldn’t find much documentation about this (docs.moodle.org/404/en/How_to_add_custom_fonts_in_a_theme), but searched back through my records and found then tracker issue that added the functionality, MDL-23493 (tracker.moodle.org/browse/MDL-23493). As this is a thing for Moodle’s CSS pre-processor and not it’s SCSS pre-processor, the string will need to be ‘Quoted’ to tell the SCSS pre-processor that it is a string to be just used and not interpreted, otherwise it won’t understand what it is and fail. However, CSS does need to interpret other elements of the string with the URL that the Moodle CSS pre-processor will create, thus we need to use the ‘unquoted’ SCSS function (sass-lang.com/documentation/modules/string/#unquote and sass-lang.com/documentation/values/strings/#unquoted) when generating the CSS from the SCSS to be passed to the CSS pre-processor. Complicated? Indeed, but if we look at what we’ll put in the ‘theme_boost | scss’ setting, under ‘Site Administration → Appearance → Themes’, then select the ‘cog’ for the Boost ‘theme’ to get its settings (in Moodle 4,.4), then ‘Advanced settings’, then I’ll explain from here:
Code to copy:
@font-face { font-family: 'EdgeDisplay'; src: unquote("url([[font:theme|EdgeDisplay-Regular.otf]]) format('opentype')"); font-weight: 400; } @font-face { font-family: 'EdgeDisplay'; src: unquote("url([[font:theme|EdgeDisplay-Bold.otf]]) format('opentype')"); font-weight: 700; }
Firstly there is ‘@font-face’ (developer.mozilla.org/en-US/docs/Web/CSS/@font-face), this is the CSS ‘at-rule’ that contains all of the descriptors used to specify a custom font to be used on the web page, including where it’s font file is. Inside we have:
- ‘font-family’ (developer.mozilla.org/en-US/docs/Web/CSS/font-family), that states the name of the font.
- ‘src’ is the ‘source’ for the font file, in this case the ‘url’ and its ‘format’. These two descriptors state where to get the font from and its format. The former being our Moodle formatted file path and name to be processed by Moodle’s CSS pre-processor. The latter being ‘format’ (developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#format and developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#font_formats). Then the whole ‘string’ is passed to the ‘unquote’ method so that nothing within is processed or validated by the SCSS pre-processor.
- ‘font-weight’ is where we’ve specified the weight of the font file (or even files) we’ve stated in the ‘src’.
‘@font-face’ just defines a font to be used, but doesn’t actually use it. For that we need to use ‘font-family’ again but within a CSS selector. However, as the Boost theme uses Bootstrap (getbootstrap.com) as a framework, then it and the Moodle SCSS are already defining selectors that state what font and weight to use for a given mark-up element on our web page. This is does in the ‘theme/boost/scss/bootstrap/_variables.scss’ file with specific variables:
$font-family-sans-serif: -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" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.25 !default; $font-size-sm: $font-size-base * .875 !default; $font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 700 !default; $font-weight-bolder: bolder !default;
This is where we can not only see the definition of the ‘font name’, but the ‘size’ and ‘weight’, where we see the values of 400 and 700 for ‘normal’ and ‘bold’ that we’ve mentioned before and stated for the weights in ‘@font-face’.
There is a Moodle UI setting ‘theme_boost | scsspre’ (again in the Boost theme settings) that defines variables and their values before they are used in the SCSS itself. In here we place:
Code to copy:
$font-family-sans-serif: 'EdgeDisplay', -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"; $font-size-base: 1.25rem;
By putting ‘EdgeDisplay’ as the first value for the ‘$font-family-sans-serif’ variable we are stating to use that first and if that doesn’t work, fallback to the next named font. Then defining ‘$font-size-base’ as ‘1.25rem’, then we are making the font bigger on the page than the ‘default’.
With both ‘theme_boost | scsspre’ and ‘theme_boost | scss’ settings set and changes saved, we can then observe the effect:
And that is it!
Conclusion
I could have explained things in more detail, but I wanted to keep the article as short as possible whilst at the same time go beyond ‘copy / paste / change this and this’. I hope that you’ve found this informative and will have a go on your test server.
- Settings transfer – 16th October 2024
- Added value – 16th September 2024
- What is a developer? – 16th August 2024
Thank you Stu, and looks like the browser can override the font stated on the page, such as https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_custom-fonts, so disabling the setting set the fonts I’d chosen in the browser.
Very interesting Gareth.
It’s certainly a bit of work to do this, but the way you have explained it and the examples means it should be within many Moodle administrators ability if required.
I always wonder though, would a browser still be able to over-ride these font settings ?
Thank you Stu, interesting question and looking at https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_custom-fonts then disabling ‘Allow pages to choose their own fonts, instead of your selections above’ would override it in the browser.