For the online learning world

Elearning World

Customising H5P in Moodle using the Foundation theme – Part Two


In my last post (www.elearningworld.org/customising-h5p-in-moodle-using-the-foundation-theme/) you read about how you can use custom CSS with the Foundation theme (moodle.org/plugins/theme_foundation) to alter the look of H5P within Moodle. At the end of the post I stated “One thought that has occurred to me in writing this post is the need to support custom fonts that the theme already has or serve from a list then all you’d need to do would be to write the ‘font-family’ CSS attribute as required. The question is then, is this functionality needed?”, well Stuart replied and said it was, so ‘challenge accepted’!

To recap, H5P is a way of creating interactive content on a web page. It can be integrated into Moodle with the plugin: moodle.org/plugins/mod_hvp.

Disclaimers and license

Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.

H5P™ is a trademark of ‘Joubel AS’ – h5p.org/trademark and h5p.org/licensing.

H5P demonstration material is – creativecommons.org/licenses/by/4.0/ – licensed.

Firefox® is a registered trademark of the Mozilla Foundation.

Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy

Other names / logos can be trademarks of their respective owners. Please review their website for details.

I am independent from the organisations listed above and am in no way writing for or endorsed by them.

What has changed

I have added a new setting ‘hvpfontcss’:

which the default is all of the ‘@font-face’ declarations for all of the fonts in the theme. If you add fonts to the ‘fonts’ folder then all you need to do is write your own ‘@font-face’ CSS using the standard Moodle mechanism (docs.moodle.org/37/en/How_to_add_custom_fonts_in_a_theme) for the file.

Then to use with H5P all you need to do is state the ‘font-family’ in any CSS that you write:

.current-slide-title {<br>
    color: #fab;<br>
    font-family: 'Montserrat';<br>
    font-style: italic;<br>
    font-weight: 900;<br>

and place it in the ‘hvpcustomcss’ setting.

With the example we now have:

where you can see the font being applied to the text ‘Cloudberries’.

You can find information about the release on my Moodle.org post: moodle.org/mod/forum/discuss.php?d=391938.

And there is more….

I have also added support for Font Awesome 5 Free (fontawesome.com), which you can turn on with the ‘fav’ setting:

I’ve ported the code from Shoelace (moodle.org/plugins/theme_shoelace) and improved it by updating to 5.11.2 from 5.0.13 and testing a bit further to ensure more of the icons are catered for.

This will change the look of the icons and you’ll be able to have (currently) 1544 icons (fontawesome.com/icons?d=gallery&m=free) instead of 675 (fontawesome.com/v4.7.0/icons/):

The how

Making this happen was not trivial.

Adding ‘hvpfontcss’ was a matter of pre-fixing the existing H5P custom CSS with a processed version of the ‘hvpfontcss’ setting where the ‘font:theme’ tags had been converted into URL’s that the browser could use. This was done by adapting the ‘post_process’ method in the core Moodle ‘theme_config’ object. This is the beauty of Open Source software, you can build upon or adapt on what has already been solved before.

Adding the ‘fav’ setting was much harder. I had already done this in the Shoelace theme so had to port what I’d almost completed there to Foundation. Moodle has icon system classes and a means by which the methods tell the code how to translate core icons into specific icons in the font being used. This has to happen both for icons being converted in the PHP and JS code.

The programmatic approach to this follows the steps of:

  1. Define a goal of what needs to be achieved.
  2. Understand how the Moodle functionality works.
  3. Understand what is being added.
  4. Work out what modifications are required to integrate the new with the existing.
  5. Write the code whilst progressively checking and testing that what is intended actually happens.
  6. Test that the code works.
  7. Sleep on it.
  8. Test again that the code works.
  9. Release the code with the option to turn off if it does not actually work.
  10. Hopefully get feedback to confirm that it works or if not then fix the issue(s).


Improving software with new functionality adds value to that software. It also comes with risk. The risk of breaking something that is believed to work. Thus that risk has to be worth taking.

Gareth Barnard
Latest posts by Gareth Barnard (see all)

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.

One thought on “Customising H5P in Moodle using the Foundation theme – Part Two

  • Wow !
    I really like the additional H5P settings in this Theme !
    I note that Moodle has H5P integration as a new activity of the Roadmap, so maybe it will be in Moodle 3.8?
    AND … adding support for Font Awesome 5 is fantastic !
    I’ve had to do some workarounds previously to use FA5 (instead of FA4) – so this is super 🙂
    I wonder if the Mobile App support FA5 yet? Last time I looked it was still tied to FA4 🙁


Add a reply or comment...