Notes

  • To complete this tutorial you must be able to login to Moodle as an administrator.
  • You will also need access to the files on the server (FTP or SSH access).
  • This tutorial is for Moodle 2.3 or above (it can be done for Moodle 2.0, 2.1, 2.2 and I’m happy to extend this blog post if someone asks me for it).
  • Adding Google fonts will have a slight impact on page load time (not noticeable in most cases). The more fonts you add, the more significant the impact.
  • This tutorial also works for other Web font services such as FontSquirrel, TypeKit, Adobe Edge fonts, etc.
  • Although I have never noticed any problems with this technique, don’t come and blame me if it breaks something in your Moodle installation 😉

How to add Google web fonts to Moodle TinyMCE editor

  1. Go to the Google fonts page and find a font you like

Google fonts for Moodle

  1. Click on the ‘Quick use’ icon (you can click ‘add to collection’ if you want to use more than one font)

Quick use google font for Moodle

  1. Scroll down to the ‘Add this code to your website’ section and copy the text in the ‘Standard’ box

Select text

  1. Scroll down to the ‘Integrate the fonts into your CSS’ section

Integrate the fonts into your CSS

  1. Copy all text after the colon mark, but remove the quotation marks and the semi-colon Clean text to be copied

  2. In Moodle, go to ‘Administration > Site administration > Appearance > Additional HTML’

  3. Paste the text you copied in step 3 of this tutorial Additional HTML in Moodle

  4. Scroll down and click ‘Save changes’

  5. Go to ‘Administration > Site administration > Plugins > Text editors > TinyMCE HTML editor > General settings’

  6. Scroll down to ‘Available fonts list’

  7. Type a semi-colon mark (if not already there), a name for your new font (this can be anything) and an equal sign

  8. Paste the text you copied in step 5 of this tutorial (make sure there are no quotation marks) Adding a Google font to Moodle

  9. Scroll down and click ‘Save changes’

  10. Open the /lib/editor/tinymce/lib.php file for editing Lib file for TinyMCE editor in Moodle

  11. Locate ‘$contentcss’ and add a new line following the example below. Replace the bit in pink with the text you copied in step 3 of this tutorial. Note that there are two fonts available in the example. Also note the dot and comma.

Extend CSS for Moodle to register Google fonts in TinyMCE

  1. Save and close the file

  2. (optional) Purge all caches at ‘Administration > Site administration > Development > Purge all caches’

  3. Your fonts are now available anywhere TinyMCE is present. Enjoy!

How to add Google fonts to Moodle

Note: I have not yet been able to get this to work using the ‘Custom CSS’ available in some themes. Has anyone done it?