Moodle 2.3 Theme Engine

Using Google's Font API

Fonts provided by Google's Font API can be applied to Moodle site text using the RL Master theme.

1. Navigate to http://www.google.com/fonts and find the font you want to use.

2. Find the font you want to use: 

Browse Google Fonts






















3. Select the Quick Use link below in the button set for the font:
Google Font Quick Use URL















4. Select the styles and character sets you want available to your font set. The more styles you use the longer the font set will take to load. Latin should be enough for most English-language sites. If you have multiple languages, especially languages that do not use the standard Latin character set, you may want to add more. The styles and character sets provided by Google are a service of Google, and Remote-Learner does not provide service for them.
Google Font Select Settings

     


















5. Copy the <link> markup provided to your clipboard:
Copy link

















6. On your Moodle site, navigate to Site Administration > Appearance > Themes > RL Master > Custom tab. Paste the <link> markup into the Head HTML field.
RL Master Paste Link






















7. The Google Font page also provides a sample selector for applying the newly loaded font. 
Sample selector








8. On your Moodle site, navigate to Site Administration > Appearance > Themes > RL Master > Custom tab. Enter the selectors for the text you want to utilize the font. Apply the font-family indicated by the Google Fonts API sample. Selectors are easiest to determine by using your Web browser's developer tools and viewing the classes or ID applied to the element you want to style. You may wish to refer to a CSS reference in composing your selectors. http://www.w3schools.com/cssref/css_selectors.asp
Enter CSS
















9. Below are some selectors common to Moodle:
 /* Block headers */
.block .header h2 { /* your font-family here */ }

/* Breadcrumb trail */
.breadcrumb .navigation li { /* your font-family here */ }

/* Footer */
#page-footer { /* your font-family here */ }

/* Header info */
.headermenu { /* your font-family here */ }

/* Site title when there is no logo image */
#nologo a { /* your font-family here */ }