Essential Custom Font

Re: Essential Custom Font

by Mary Evans -
Number of replies: 8
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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: -
In reply to Mary Evans

Re: Essential Custom Font

by Kyle Zeto -

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: -
In reply to Kyle Zeto

Re: Essential Custom Font

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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: -
In reply to Mary Evans

Re: Essential Custom Font

by Kyle Zeto -

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: -
In reply to Kyle Zeto

Re: Essential Custom Font

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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: -
In reply to Mary Evans

Re: Essential Custom Font

by Dave Hope -

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: -
In reply to Dave Hope

Re: Essential Custom Font

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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: -
In reply to Dave Hope

Re: Essential Custom Font

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of 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: -