Note: You are currently viewing documentation for Moodle 4.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
mNo edit summary
(editing thanks to Gareth J Barnard)
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:
@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:


    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(<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.
    For example:
     #page-header h1 { font-family: FontName;}
     #page-header h1 { font-family: FontName;}



Revision as of 16:02, 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 followingt:


@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;}