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
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)
Click to zoom in
3. Scroll down to the ‘Add this code to your website’ section and copy the text in the ‘Standard’ box
Click to zoom in
4. Scroll down to the ‘Integrate the fonts into your CSS’ section
Click to zoom in
5. Copy all text after the colon mark, but remove the quotation marks and the semi-colon
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
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)
Click to zoom in
13. Scroll down and click ‘Save changes’
14. Open the /lib/editor/tinymce/lib.php file for editing
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.
Click 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!
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?
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!
Related:
Adding a new font to your theme
http://moodle24custom.blogspot.com/2013/02/adding-new-font-to-your-theme.html
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
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
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
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!
Thanks for the positive feedback.
Cheers,
Fred