Webfonts no longer working with my theme in Moodle 3.10

Webfonts no longer working with my theme in Moodle 3.10

by Lexy Walker -
Number of replies: 6
Picture of Core developers Picture of Particularly helpful Moodlers

Hi folks,

I've got a custom Moodle theme which is basically Boost with some navigation tweaks and a few accessibility options added.

One of the accessibility options loads a custom dyslexia-friendly webfont. We do this using a CSS file to load the web font, then adding a class to the body tag to use web web font. We load the CSS file through $THEME->sheets[].

@font-face {
    font-family: 'OpenDyslexic';
    src: url([[font:theme|dyslexic-r.woff]]) format('woff'));
    font-weight: 400;
    font-style: normal;
}

body.hillhead-font-dyslexic, .accessibility-tools .switch-to-dyslexic-font {
    font-family: "OpenDyslexic", "Helvetica", "Arial", sans-serif;
}

We've used this approach in our theme for years. It has worked in Moodle 3.3, 3.5, 3.7, 3.8 and 3.9. But it's not working in Moodle 3.10 - everything's in plain old Helvetica.

Using my browser's web inspector tool, I can see that the CSS is loading and the correct body class is applied. There's no debugging output in the logs, and nothing logged in the browser's console. I've also taken a look at /theme/upgrade.txt and there's nothing exciting in there.

I'm vaguely aware that Bootstrap has changed how it handles fonts. If I inspect something on the page and look at the computed CSS, I'm seeing font-family-sans-serif instead of the old font-family.

I'll admit, my CSS skills were top of the game back in 2010 and the Bootstrap 2 era, but a lot has changed since then and I haven't kept up as much as I'd like - new job with different responsibilities etc. If anyone with their finger on the pulse of Moodle theme development could give me a pointer in the right direction, I'd really appreciate it. Google isn't showing anything recent or helpful, and is full of basic "how to use custom webfonts in Bootstrap" articles from 2014.

Average of ratings: -
In reply to Lexy Walker

Re: Webfonts no longer working with my theme in Moodle 3.10

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Just to check that the font is in the theme 'fonts' folder?
Average of ratings: -
In reply to Gareth J Barnard

Re: Webfonts no longer working with my theme in Moodle 3.10

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Ok, just checked with one of my themes and the core font serving functionality is working in M3.10 (Build: 20201109), so try with single quotes:
src: url('[[font:theme|dyslexic-r.woff]]') format('woff'));
Average of ratings: -
In reply to Gareth J Barnard

Re: Webfonts no longer working with my theme in Moodle 3.10

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
And look at the 'Font' bit of the 'Network' tab in the browser development tools, is the font file being served?
Average of ratings: -
In reply to Gareth J Barnard

Re: Webfonts no longer working with my theme in Moodle 3.10

by Lexy Walker -
Picture of Core developers Picture of Particularly helpful Moodlers
Thanks for the replies. This is our Moodle 3.8 theme checked out of GitHub and dropped into a clean 3.10 installation.

I've added quotes around the [[font:theme]] declarations, but no dice.

The .woff files are definitely in the theme's fonts folder. If I manually craft a request through /theme/font.php, the browser downloads the .woff file, so I can assume the files are on the server fine.

The fonts don't show up under the 'Font' section of the web inspector. Safari does seem smart enough to only load a font if it's being used by something on the page (i.e. on my working sites, it won't request the dyslexic font if nothing on the page is using it). So I've got a chicken-and-egg situation where I don't know if it isn't being used because it isn't being requested, or it isn't being requested because it isn't being used.

Thanks for the sanity checks - I'm going to poke about at this, and update this thread when I find out what's happened.
Average of ratings: -
In reply to Lexy Walker

Re: Webfonts no longer working with my theme in Moodle 3.10

by Lexy Walker -
Picture of Core developers Picture of Particularly helpful Moodlers

SOLVED

After ignoring the issue for six months, I've looked into it again and solved the problem.

There was a typo in the src line of my @font-face declaration. The line ended with format('woff')); - notice the extra closing bracket that shouldn't be there.

That typo has existed in my code for five years and that's my fault, but it's weird that the webfont worked in 3.3, 3.4, 3.5, 3.6, 3.7, 3.8 and 3.9. It broke in 3.10 and 3.11.

I suspect Moodle's CSS combining/caching/minifying code was silently fixing the issue for me, until that code was rewritten. Not a bug in Moodle and certainly not a problem - it was my typo that caused this. It's just a "huh, that's weird" thing.

Average of ratings: -
In reply to Lexy Walker

Re: Webfonts no longer working with my theme in Moodle 3.10

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
I'm now kicking myself that I didn't spot it too!
Average of ratings: -