Note: You are currently viewing documentation for Moodle 2.8. 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 GarethJ Barnard)
m (Reverted edits by Marycooch (talk) to last revision by Mary Evans 2)
 
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/


In your themes CSS file add the followingt:
    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/
 
@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;
  }
      
      
    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(<nowiki>[[font:theme|fontname.eot]]</nowiki>);
      src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>) format('embedded-opentype'),
          url(<nowiki>[[font:theme|fontname.woff]]</nowiki>) format('woff'),
          url(<nowiki>[[font:theme|fontname.ttf]]</nowiki>) format('truetype'),
          url(<nowiki>[[font:theme|fontname.svg]]</nowiki>) 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.
     Next ADD the name of your font wherever you want that font to be used in your stylesheet.

Latest revision as of 16:00, 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.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;}