How to add custom fonts in a theme: Difference between revisions
From MoodleDocs
Mary Evans 2 (talk | contribs) (Created page with " Create a new directory in your theme and call it fonts. Then add all your custom fonts in this directory. eg: moodle/theme/yourtheme/fonts/ In your themes CS...") |
Mary Evans 2 (talk | contribs) No edit summary |
||
Line 6: | Line 6: | ||
@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'; | ||
src: url([[font:theme|fontname.eot]]); | src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>); | ||
src: url([[font:theme|fontname.eot]]) format('embedded-opentype'), | src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>) format('embedded-opentype'), | ||
url([[font:theme|fontname.woff]]) format('woff'), | url(<nowiki>[[font:theme|fontname.woff]]</nowiki>) format('woff'), | ||
url([[font:theme|fontname.ttf]]) format('truetype'), | url(<nowiki>[[font:theme|fontname.ttf]]</nowiki>) format('truetype'), | ||
url([[font:theme|fontname.svg]]) format('svg'); | url(<nowiki>[[font:theme|fontname.svg]]</nowiki>) format('svg'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; |
Revision as of 17:26, 19 November 2013
Create a new directory in your theme and call it fonts. Then add all your custom fonts in 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;}