Note: You are currently viewing documentation for Moodle 3.9. Up-to-date documentation for the latest stable version of Moodle may be available here: How to add custom fonts in a theme.

How to add custom fonts in a theme: Difference between revisions

From MoodleDocs
(editing thanks to Gareth J Barnard)
m (fixed typo)
Line 1: Line 1:
Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory' eg: moodle/theme/yourtheme/fonts/
Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory' eg: moodle/theme/yourtheme/fonts/


In your themes CSS file add the followingt:
In your themes CSS file add the following:





Revision as of 17:11, 1 May 2015

Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory' eg: moodle/theme/yourtheme/fonts/

In your themes CSS file add the following:


@font-face { /* where FontName and fontname represents the name of the font you want to add */
    font-family: 'FontName';
    src: url(fontname.eot);
    src: url(fontname.eot) format('embedded-opentype'),
         url(fontname.woff) format('woff'),
         url(fontname.woff2) format('woff2'),
         url(fontname.ttf) format('truetype'),
         url(fontname.svg) format('svg');
    font-weight: normal;
    font-style: normal;
  }

Next ADD the name of your font wherever you want that font to be used in your stylesheet

For example:

   #page-header h1 { font-family: FontName;}