How to add custom fonts in a theme

From MoodleDocs
Revision as of 17:19, 1 May 2015 by Mary Evans 2 (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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([[font:theme|fontname.eot]]);
     src: url([[font:theme|fontname.eot]]) format('embedded-opentype'),
          url([[font:theme|fontname.woff]]) format('woff'),
          url([[font:theme|fontname.woff2]]) format('woff2'),
          url([[font:theme|fontname.ttf]]) format('truetype'),
          url([[font:theme|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;}