Themes

Essential Custom Font

 
 
Picture of James Haigh
Essential Custom Font
 

We have had a branding change and I would like to use a custom font (non-google) within the Essential theme. I have already implemented the font on another web site but I have full control of the CSS but as yet have not been successful in modding the theme.

Any suggestions.

Many thanks,
James

 
Average of ratings: -
It's only an avatar...
Re: Essential Custom Font
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

What you need to do is add your font file/s to the Essential/fonts/ directory and then add the CSS that you need to declare that font by adding the following...where 'My Web Font' and 'webfont' represent the name of the font you are going to use. You also only need to include the file type of the ones you have files of.

@font-face {
  font-family: 'MyWebFont';
  font-weight: normal;
  font-style: normal;
  src: url([[font:theme|webfont.eot]]); /* IE9 Compat Modes */
  src: url([[font:theme|webfont.eot?#iefix']]) format('embedded-opentype'), /* IE6-IE8 */
       url([[font:theme|webfont.woff]]) format('woff'), /* Modern Browsers */
       url([[font:theme|webfont.ttf]])  format('truetype'), /* Safari, Android, iOS */
       url([[font:theme|webfont.svg#svgFontName]]) format('svg'); /* Legacy iOS */
}
Then you need to write the CSS rules as normal to style your theme as required, be it in the body or headers or selected areas. You can add this extra CSS to the Essential stylesheet of in the Essential Custom CSS settings page.

Hope this helps?

Mary

 
Average of ratings: -
Picture of Kyle Zeto
Re: Essential Custom Font
 

Hi Mary,

Thanks for the code. I've had no luck implementing this in my instance of Essential theme however - is there something obvious I'm not doing right?

 
Average of ratings: -
It's only an avatar...
Re: Essential Custom Font
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

The best thing to do, if you want help, is to upload the @font-face mark-up then I can see if you have done it correctly.

 
Average of ratings: -
Picture of Kyle Zeto
Re: Essential Custom Font
 

server
Above is the font files in our Moodle server, and below is the CSS in the 'custom css' field of the essential theme's general settings:

@font-face {
  font-family: 'BentonSans-Regular';
  font-weight: normal;
  font-style: normal;
  src: url([[font:theme|BentonSans-Regular.eot]]);
  src: url([[font:theme|BentonSans-Regular.eot?#iefix']]) format('embedded-opentype'),
       url([[font:theme|BentonSans-Regular.woff]]) format('woff'),
       url([[font:theme|BentonSans-Regular.ttf]])  format('truetype'),
       url([[font:theme|BentonSans-Regular.svg#svgBentonSans-Regular]]) format('svg');
}

Google fonts is disabled as well. It's very possible I'm missing something obvious, but any help would be appreciated. Our media department is adamant we use this special font.
Thanks!


 
Average of ratings: -
It's only an avatar...
Re: Essential Custom Font
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

What is the CSS you have added to your stylesheet to tell Moodle which bits need to use the BentonSans-Regular font? for example:

body {font-family: 'BentonSans-Regular', sans-serif; font-size: 14px; line-height: 1.4;}

The @font-face code looked OK on first glance however you might be better leaving off the extension bits of code as they are not needed:

for example:

  src: url([[font:theme|BentonSans-Regular.eot]]);
  src: url([[font:theme|BentonSans-Regular.eot?#iefix']]) format('embedded-opentype'),
       url([[font:theme|BentonSans-Regular.woff]]) format('woff'),
       url([[font:theme|BentonSans-Regular.ttf]])  format('truetype'),
       url([[font:theme|BentonSans-Regular.svg#svgBentonSans-Regular]]) format('svg');
}

You still need to declare in your theme css where you want to use this new font.

 
Average of ratings: -