Note: You are currently viewing documentation for Moodle 3.0. 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
m (fixed typo)
No edit summary
 
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 following:
'''In your themes CSS file add the following:'''
 
<pre>
 
  @font-face { /* where FontName and fontname represents the name of the font you want to add */
  @font-face { /* where FontName and fontname represents the name of the font you want to add */
     font-family: 'FontName';
     font-family: 'FontName';
Line 15: Line 14:
     font-style: normal;
     font-style: normal;
   }
   }
 
</pre>
Next ADD the name of your font wherever you want that font to be used in your stylesheet
Next ADD the name of your font wherever you want that font to be used in your stylesheet



Latest revision as of 17:19, 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([[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;}