Did you know about the new font settings in Moodle 2.6?

Did you know about the new font settings in Moodle 2.6?

by Mary Evans -
Number of replies: 16
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

PLEASE NOTE THIS METHOD IS ONLY POSSIBLE IN MOODLE 2.6

WHICH WILL BE RELEASED IN A FEW WEEKS TIME.

For more details please read...

http://docs.moodle.org/dev/Themes_overview#Adding_custom_fonts

Ok that said...It goes something like this...

Assuming you want to use FontAwesome in your theme.

Download the FontAwsome from HERE

Extract all the fonts from that zip file to your Moodle site and place them in a New Folder called fonts like so...

moodle/theme/yourthemename/fonts

Then add the font-awesome.css file in that zip to your theme's style folder and then change the @font-face section inside that file to read as follows...

@font-face {
  font-family: 'FontAwesome';
  src: url([[font:theme|fontawesome-webfont.eot]]);
  src: url([[font:theme|fontawesome-webfont.eot]]) format('embedded-opentype'),
       url([[font:theme|fontawesome-webfont.woff]]) format('woff'),
       url([[font:theme|fontawesome-webfont.ttf]]) format('truetype'),
       url([[font:theme|fontawesome-webfont.svg]]) format('svg');
  font-weight: normal;
  font-style: normal;
}
Then whenever you want to use the font you just use font-family CSS rule...

For example:

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}

Last but not the least:

DO NOT FORGET TO ADD THE NAME OF THE font-awesome.css FILE TO YOUR THEME'S config.php or else it will not work.

$THEME->sheets = array(
    'pagelayout,
    'core',
    'font-awesome',
    'settings'
);

If you have any questions please do not hesitate to ask.

Cheers

Mary

Average of ratings: Useful (3)
In reply to Mary Evans

Re: Did you know about the new font settings in Moodle 2.6?

by David Scotson -
Bear in mind that for publicly available fonts like Font Awesome, that linking to an externally hosted version might be a good choice (and works with older Moodles):

http://www.bootstrapcdn.com/#fontawesome_tab
Average of ratings: Useful (1)
In reply to David Scotson

Re: Did you know about the new font settings in Moodle 2.6?

by Stuart Lamour -
Picture of Plugin developers

cdns all the way for me.

 

 

Average of ratings: -
In reply to Mary Evans

Re: Did you know about the new font settings in Moodle 2.6?

by Danny Wahl -

Mary,

is this specific to themes or can it be used by all plugins:

e.g. text-filters, blocks, course formats, etc...?

Just for the sake of pursuing discussion I don't think including things like font icons in a theme is the best course of action.

I think there should be a sub-plugin (maybe the text filter?) that calls and loads font-awesome and then the theme can mark that plugin as a dependency if there are theme specific needs for font awesome (like how Essential and Aardvark replace nav-tree icons with font icons).

The reason being if a user adds icons to their course it only works on a theme that has font awesome explicitly enabled, so if theme switching is enabled at the user level the course presentation "breaks".

I guess I'm arguing that course presentation (content) shouldn't be dependent upon themes.

Average of ratings: -
In reply to Danny Wahl

Re: Did you know about the new font settings in Moodle 2.6?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It is true for blocks and course formats, not sure about text filters.

I've been trying to find the Moodle Doc related to this topic but have had little success. It's like trying to find a needle in a haystack!

By the way, I only used the Awesome font as an example, you can add any font you like. Works well for corporate themes where companies have a set font style in their website.

As for courses and course themes then it would be the Administrator's job to see that the theme which students use allow customisation of work and have the appropriate font installed.

Of course if you don't like the idea of custom fonts in themes well that is your prerogative. I was just letting the community know about this new feature.

Oh and if you had not noticed it works similar to the pix image in CSS the only difference is that you also need to add the file extention.

font:theme|fontfile.eot

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Did you know about the new font settings in Moodle 2.6?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

I looked through my eMails and found the tracker MDL-23493 which leads to http://docs.moodle.org/dev/Themes_overview#Adding_custom_fonts.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Did you know about the new font settings in Moodle 2.6?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thanks Gareth!

cheers

Average of ratings: -
In reply to Mary Evans

Re: Did you know about the new font settings in Moodle 2.6?

by Julian Ridden -

Challenge for you Mary (or anyone else)

Trying to write this for Essential..but having issues.

using the latest nightly build of master.

As you will see from my screenshot it is not converting [[font:theme into a path. Any ideas?

 

Attachment bug.png
Average of ratings: -
In reply to Julian Ridden

Re: Did you know about the new font settings in Moodle 2.6?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Julian,

I see on GitHub that the code is the old font setting code -> https://github.com/moodleman/moodle-theme_essential/blob/master/style/custom.css.  Could you upload it and I'll test on M2.6 and see what's going on.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Did you know about the new font settings in Moodle 2.6?

by Julian Ridden -

Sorry..this code is not on GitHub. have not published my Modole 2.6 branch. I think I know the problem. Going to raise it as a bug.

I have a custom function that dynamically changes the path to be either a CDN path or local file path based on a theme setting. The functions below top and tail the font name.

 
function theme_essential_set_fontwwwstart($css) {
   $tag = 'setting:fontwwwstart';
   $theme = theme_config::load('essential');
   if (!empty($theme->settings->bootstrapcdn)) {
     $css = str_replace($tag, 'http://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/', $css);
   } else {
     $css = str_replace($tag, '[[font:theme|', $css);
   }
   return $css;
}
function theme_essential_set_fontwwwend($css) {
   $tag = 'setting:fontwwwend';
   $theme = theme_config::load('essential');
   if (!empty($theme->settings->bootstrapcdn)) {
     $css = str_replace($tag, '', $css);
   } else {
     $css = str_replace($tag, ']]', $css);
   }
   return $css;
}
 

My CSS fie contains.

@font-face {
 font-family: 'FontAwesome'; 
 font-weight: normal;
 font-style: normal;
 src: url('setting:fontwwwstartfontawesome-webfont.eotsetting:fontwwwend');
 src: url('setting:fontwwwstartfontawesome-webfont.eotsetting:fontwwwend') format('embedded-opentype'), 
 url('setting:fontwwwstartfontawesome-webfont.woffsetting:fontwwwend') format('woff'), 
 url('setting:fontwwwstartfontawesome-webfont.ttfsetting:fontwwwend') format('truetype'), 
 url('setting:fontwwwstartfontawesome-webfont.svgsetting:fontwwwend') format('svg');
}

It seems that when this populates the css file with the correct tag Moodle is not interpreting it and transforming it into the correct font path.

 

P.S. Expect to see double square brackets where you would expect them. Moodle.org has a filter that seems to be stripping them here.

Julian

Average of ratings: Useful (1)
In reply to Julian Ridden

Re: Did you know about the new font settings in Moodle 2.6?

by Julian Ridden -

I have updated the MASTER branch with my 2.6 work down to date so you can see my issue. https://github.com/moodleman/moodle-theme_essential

Gareth and I talked via twitter and our common belief is that Moodle is completing preprocessing before the functions I created are called. I believe this to be a bug. Can I get confirmation of this please?

Julian

Average of ratings: -
In reply to Julian Ridden

Re: Did you know about the new font settings in Moodle 2.6?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm not quite sure why you are trying to link to external files when you have them all tucked up in the fonts directory inside Essential.

Why is it that developers love to meddle using PHP to do something else.

A work-a-round inside a work-a-round inside a setting within a setting???

The mind boggles.

It reminds me of http://www.thewindmillsofyourmind.com/

smile

Mary

Average of ratings: -
In reply to Mary Evans

Re: Did you know about the new font settings in Moodle 2.6?

by Julian Ridden -

It is about providing options Mary,

The CDN source loads faster and more efficiently and is certainly what I would like to recommend and hence built it in.

Lots of environments however are behind tight firewalls that require everything to be loaded locally and thus blocking CDN. Hence the font being loaded by the theme as a second option.

Always a method to the madness.

Julian

Attachment 4lights.jpg
Average of ratings: -
In reply to Julian Ridden

Re: Did you know about the new font settings in Moodle 2.6?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi,

I'm finding that if you have:

@font-face {
  font-family: 'FontAwesome';
  src: url('[[font:theme|fontawesome-webfont.eot]]?v=4.0.3');
  src: url('[[font:theme|fontawesome-webfont.eot]]?#iefix&v=4.0.3') format('embedded-opentype'),
       url('[[font:theme|fontawesome-webfont.woff]]?v=4.0.3') format('woff'),
       url('[[font:theme|fontawesome-webfont.ttf]]?v=4.0.3') format('truetype'),
       url('[[font:theme|fontawesome-webfont.svg]]?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
} 

Then '/theme/font.php' cannot find the file because the regex is failing: 

if (preg_match('/^[a-z0-9_-]+\.woff$/i', $font, $matches)) {
    // This is the real standard!
    $font = $matches[0];
    $mimetype = 'application/font-woff';

} else if (preg_match('/^[a-z0-9_-]+\.ttf$/i', $font, $matches)) {
    $font = $matches[0];
    $mimetype = 'application/x-font-ttf';

} else if (preg_match('/^[a-z0-9_-]+\.otf$/i', $font, $matches)) {
    $font = $matches[0];
    $mimetype = 'application/x-font-opentype';

} else if (preg_match('/^[a-z0-9_-]+\.oet$/i', $font, $matches)) {
    // IE8 must die!!!
    $font = $matches[0];
    $mimetype = 'application/vnd.ms-fontobject';

} else {
    font_not_found();
}

To match the font name because it is 'fontawesome-webfont.woff?v=4.0.3' etc.  So:

  1. How important is the 'v=4.0.3'?
  2. If '1' how can the regex be changed?

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Did you know about the new font settings in Moodle 2.6?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

1. None whatsoever.

2. No need.

As far as I can gather the version is only for reference to distinguish one font version from another, so one does not delete the wrong font.

Average of ratings: Useful (3)