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 Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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 Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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 Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Picture of Dave Hope
Re: Essential Custom Font
 

Hey, thanks for the explanation/instructions but I'm having trouble getting my custom font to load.

What I've done:

  • Copied all the font files to /theme/essential/fonts
  • Changed my original @font-face CSS from:
@font-face {
    font-family: 'adelleRegular';
    src: url('adellesanssage-webfont.eot');
    src: url('adellesanssage-webfont.eot?#iefix') format('embedded-opentype'),
         url('adellesanssage-webfont.woff2') format('woff2'),
         url('adellesanssage-webfont.woff') format('woff'),
         url('adellesanssage-webfont.ttf') format('truetype'),
         url('adellesanssage-webfont.svg#adelle_sans_sageregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

to

@font-face {
    font-family: 'adelleRegular';
    src: url([[font:theme|adellesanssage-webfont.eot]]);
    src: url([[font:theme|adellesanssage-webfont.eot?#iefix]]) format('embedded-opentype'),
         url([[font:theme|adellesanssage-webfont.woff2]]) format('woff2]]),
         url([[font:theme|adellesanssage-webfont.woff]]) format('woff'),
         url([[font:theme|adellesanssage-webfont.ttf]]) format('truetype'),
         url([[font:theme|adellesanssage-webfont.svg#adelle_sans_sageregular]]) format('svg');
    font-weight: normal;
    font-style: normal;
}
  • Added this custom @font-face CSS to Custom CSS (theme_essential | customcss)
  • Added "adelleRegular" to the Heading font (theme_essential | fontnameheading) field in Site administration > Appearance > Themes > Essential > Font

Anything blindingly obvious I've done wrong?

One thing I couldn't work out is if I needed to include the single quotation marks (') that my original font file names were wrapped in - I couldn't see if I needed them as your example has closing ones but not opening ones?

Many thanks in advance!

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

Hi,

It looks OK, and no you do not need to add ' ' quotes, but have you considered that the Essential fonts CSS may use a different markup than the type you have added, which is from the Moodle Doc Tutorial I wote.

I am talking about the VERSION of Essential with respect to this part of the code:

In the latest versions this style is OK

url([[font:theme|adellesanssage-webfont.ttf]])

However in older versions of Essential the CSS mark-up for fonts is different.

url([[setting:fontwww|adellesanssage-webfont.ttf]])

So you need to check the version of the Essential theme you are using.

That said, have you added any extra CSS to tell Moodle what font you want to display in the body or headers of your site?

For example:

body { font-family: AdelleRegular; color: #336699; font-size: 14px;}

That is the most common thing people forget to do!

Hope this helps?

Mary

 
Average of ratings: -
Gareth J Barnard
Re: Essential Custom Font
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developers

Why are you adding fonts the hard way?  Just use the 'Custom fonts' feature of the theme and use the upload boxes for each font file.

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

ROFL

Why did I miss that!

 
Average of ratings: -