How to add custom fonts in a theme: Difference between revisions
From MoodleDocs
Mary Evans 2 (talk | contribs) mNo edit summary |
Mary Cooch (talk | contribs) (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: | |||
#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;}