How to add Google Webfonts to Moodle text editor (TinyMCE)

How to add Google fonts to TinyMCE editor in Moodle

Google has made it easy to use great looking fonts on websites, providing over 600 cross-browser fonts to date, for free. In this short post, you will learn how to add Google fonts to the default Moodle HTML editor, TinyMCE.ย 

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

Click to zoom in

2. 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

Click to zoom in

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

Select text

Click to zoom in

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

Integrate the fonts into your CSS

Click to zoom in

5. Copy all text after the colon mark, but remove the quotation marks and the semi-colon

Clean text to be copied

Click to zoom in

6. In Moodle, go to ‘Administration > Site administration > Appearance > Additional HTML’
7. Paste the text you copied in step 3 of this tutorial

Additional HTML in Moodle

Click to zoom in

8. Scroll down and click ‘Save changes’
9. Go to ‘Administration > Site administration > Plugins > Text editors > TinyMCE HTML editor > General settings’
10. Scroll down to ‘Available fonts list’
11. Type a semi-colon mark (if not already there), a name for your new font (this can be anything) and an equal sign
12. Paste the text you copied in step 5 of this tutorial (make sure there are no quotation marks)

Adding a Google font to Moodle

Click to zoom in

13. Scroll down and click ‘Save changes’

14. Open the /lib/editor/tinymce/lib.php file for editing

Lib file for TinyMCE editor in Moodle

Click to zoom in

15. 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 TinyMCEClick to zoom in

16. Save and close the file

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

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

How to add Google fonts to Moodle

Click to zoom inย 

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

14 comments

  1. Hi Frederic,

    I want to add these fonts:
    Lexia font and Primer font
    to TinyMCE using your method, but unfortunately, Google fonts does not have it.
    How does one add fonts that are not available on Google-Fonts to TinyMCE?
    I suppose this can’t be done then.

    Frankie Kam

    1. Hi Frankie,
      Are those fonts available on any of the web font services (e.g. Google fonts, Adobe Edge fonts, Typekit, etc.)? If not, then it cannot be added, unless the end user has that very font installed on their computer. If they don’t, then it will fall back on a more ‘run-of-the-mill’ font e.g. arial
      Cheers,
      Fred

  2. Great tutorial! Thank you! I followed it closely and thought it worked great! My Moodle install looked fabulous with the Google fonts! But then I checked it on my laptop….Google fonts don’t show, only default crappy ones. :( Same thing on my husband’s computer.

    What did I do wrong?

    The install is here: http://www.homeschoolrealm.com/moodle

  3. Brilliant guide, thank you very much! I’m in support rather than development and this was wonderfully fool proof. Now just to ensure the various google fonts aren’t restricted to any user groups by internet policies!

Leave a Reply

Your email address will not be published.