ElearningWorld.org

For the online learning world

Elearning WorldFontMoodleTechnicalThemeUX

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:

Fonts and license location

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:

Raw SCSS

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

Raw initial SCSS

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:

Font applied example

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.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

3 thoughts on “A little boost

Add a reply or comment...