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 FontSquirrelTypeKit, 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?

About Frederic Nevers

I have been a Moodler since the early days – 2005. I am now a Digital Learning Integrator and have been helping other teachers integrate Moodle in their teaching since 2007.
I have been involved in the classroom since 2002, teaching ICT and French to students aged 11 to 18 years old. I have experience teaching the (I)GCSE, IB MYP & DP and A programmes.

11 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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>