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?

  1. How to add Google Webfonts to Moodle text edito...

    [...] Google has made it easy to use great looking fonts on websites, providing over 600 cross-browser fonts to date, for free.  [...]

  2. How to add Google Webfonts to Moodle text editor TinyMCE | Moodle בחינוך – יומן מסע טכני

    [...] פורסם ב-How to add Google Webfonts to Moodle text editor (TinyMCE) | I Teach With Moodle | Sharing good prac…. [...]

  3. How to add Google Webfonts to Moodle text edito...

    [...] 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 …  [...]

  4. Frankie Kam

    Hi Frederic! Awesome post. I followed your instructions and managed to add the same Lily font to my Moodle 2.5 site. Thanks for this. Cheers!

  5. Frankie Kam

    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

    • Frederic Nevers

      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

  6. How to add Google Webfonts to Moodle text edito...

    […] 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 …  […]

  7. How to add Google Webfonts to Moodle text edito...

    […] “ 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 …”  […]

  8. How to add Google Webfonts to Moodle text edito...

    […] 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.  […]

  9. How to add Google Webfonts to Moodle text edito...

    […] Google has made it easy to use great looking fonts on websites, providing over 600 cross-browser fonts to date, for free.  […]

Respond