Moodle
  1. Moodle
  2. MDL-23493

Support for including a font through theme CSS

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.0, 2.5
    • Fix Version/s: 2.6
    • Component/s: Themes
    • Labels:
    • Rank:
      6166

      Description

      John St brought up the idea of supporting the use of a custom font through theme CSS, and in particular @font-face
      Currently I don't think there are any plans to do so, so here is an issue on which people can vote

      See linked forum discussion for more information.

      Cheers
      Sam

        Issue Links

          Activity

          Hide
          Paul Brewer added a comment -

          We a building a complete online school and we need to use some special symbols and fonts. We would like very much to see an embedded font feature added (@font-face) to Moodle 2.x including access from the content editor.

          Also we think that custom fonts are critical to new web applications these days, so we would also vote to raise the priority of this issue.

          Show
          Paul Brewer added a comment - We a building a complete online school and we need to use some special symbols and fonts. We would like very much to see an embedded font feature added (@font-face) to Moodle 2.x including access from the content editor. Also we think that custom fonts are critical to new web applications these days, so we would also vote to raise the priority of this issue.
          Hide
          John Syrinek added a comment -

          Here's what I did.

          Add this to theme/mytheme/config.php:

          $THEME->csspostprocess = 'mytheme_csspostprocess';
          


          And add this to theme/mytheme/lib.php (create this file if it doesn't exist):

          <?php
          
          
          function mytheme_csspostprocess($css, $theme)
          {
              global $CFG;
              $pattern = '/\[\[font\|([^]]+)\]\]/';
              $replacement = $CFG->wwwroot . '/theme/splashmediau/fonts/$1';
              $css = preg_replace($pattern, $replacement, $css);
              return $css;
          }
          
          


          This allows you to use things like this in your theme's stylesheets:

          @font-face {
              font-family: 'Regencie Alt Light';
              src: url('[[font|regencielightalt-webfont.eot]]');
              src: url('[[font|regencielightalt-webfont.eot?#iefix]]') format('embedded-opentype'), url('[[font|regencielightalt-webfont.woff]]') format('woff'), url('[[font|regencielightalt-webfont.ttf]]') format('truetype'), url('[[font|regencielightalt-webfont.svg#regencie_altlightalt]]') format('svg');
              font-weight: normal;
              font-style: normal;
          }
          
          Show
          John Syrinek added a comment - Here's what I did. Add this to theme/mytheme/config.php: $THEME->csspostprocess = 'mytheme_csspostprocess'; And add this to theme/mytheme/lib.php (create this file if it doesn't exist): <?php function mytheme_csspostprocess($css, $theme) { global $CFG; $pattern = '/\[\[font\|([^]]+)\]\]/'; $replacement = $CFG->wwwroot . '/theme/splashmediau/fonts/$1'; $css = preg_replace($pattern, $replacement, $css); return $css; } This allows you to use things like this in your theme's stylesheets: @font-face { font-family: 'Regencie Alt Light'; src: url('[[font|regencielightalt-webfont.eot]]'); src: url('[[font|regencielightalt-webfont.eot?#iefix]]') format('embedded-opentype'), url('[[font|regencielightalt-webfont.woff]]') format('woff'), url('[[font|regencielightalt-webfont.ttf]]') format('truetype'), url('[[font|regencielightalt-webfont.svg#regencie_altlightalt]]') format('svg'); font-weight: normal; font-style: normal; }
          Hide
          Mary Evans added a comment -

          I thought this may interest you, so just added you as a watcher.

          Show
          Mary Evans added a comment - I thought this may interest you, so just added you as a watcher.
          Hide
          Gareth J Barnard added a comment -

          Thanks Mary Evans it does .

          Perhaps the best solution will be an inbuilt:

          [[font:theme|name]]
          

          solution where the name was the name of the font and the code prefixed it with the full wwwroot path and a standard 'font' folder, like 'style' and 'pix' is in a standard place. And used just like:

          [[pix:theme|name]]
          

          in the 'url' component of the css attribute in the css file.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Thanks Mary Evans it does . Perhaps the best solution will be an inbuilt: [[font:theme|name]] solution where the name was the name of the font and the code prefixed it with the full wwwroot path and a standard 'font' folder, like 'style' and 'pix' is in a standard place. And used just like: [[pix:theme|name]] in the 'url' component of the css attribute in the css file. Cheers, Gareth
          Hide
          Koen Roggemans added a comment -

          With the extra lib file, it works.

          I managed to get this working:

          cat core.css
          @font-face

          { font-family:'OpenDyslexic'; src: url('[[font|OpenDyslexic-Regular.otf]]'); font-weight: normal; font-style: normal; }

          html, body#tinymce

          {background-color:#FAFAFA;}

          body

          {font-family:OpenDyslexic,Arial, Verdana, Helvetica, sans-serif;padding: 4px;}

          body.lang-vi

          {font-family:OpenDyslexic,Arial, Verdana, Helvetica, sans-serif !important;}

          ...

          Show
          Koen Roggemans added a comment - With the extra lib file, it works. I managed to get this working: cat core.css @font-face { font-family:'OpenDyslexic'; src: url('[[font|OpenDyslexic-Regular.otf]]'); font-weight: normal; font-style: normal; } html, body#tinymce {background-color:#FAFAFA;} body {font-family:OpenDyslexic,Arial, Verdana, Helvetica, sans-serif;padding: 4px;} body.lang-vi {font-family:OpenDyslexic,Arial, Verdana, Helvetica, sans-serif !important;} ...
          Hide
          Amy Groshek added a comment - - edited

          That looks good, Koen Roggemans. Can it be done without the !important?

          Show
          Amy Groshek added a comment - - edited That looks good, Koen Roggemans . Can it be done without the !important ?
          Hide
          Koen Roggemans added a comment -

          I don't know - I don't think it does any harm since a user !important overrules an author !important.
          The css I posted is just a tiny change of the standard theme (@font-face added and OpenDyslexic added to the font-family tag)

          Show
          Koen Roggemans added a comment - I don't know - I don't think it does any harm since a user !important overrules an author !important. The css I posted is just a tiny change of the standard theme (@font-face added and OpenDyslexic added to the font-family tag)
          Hide
          Amy Groshek added a comment - - edited

          I ask because we shouldn't be encouraging the use of !important in our CSS. The need for it implies poorly-written selectors higher up the chain. Just recommending a best-prac.

          If there's something else using !important up the line that you're needing to override then we should fix that.

          Show
          Amy Groshek added a comment - - edited I ask because we shouldn't be encouraging the use of !important in our CSS. The need for it implies poorly-written selectors higher up the chain. Just recommending a best-prac. If there's something else using !important up the line that you're needing to override then we should fix that.
          Hide
          Mary Evans added a comment -

          It shouldn't need the !important since body.lang-vi is unique, in that the rule is only when that vi lang file is selected.

          What interests me is why have you added other fonts, especially since the main font specified in the CSS rule is included in the theme.

          I'll assume that you did not have that font installed on your computer, otherwise you would not know if the font worked or not.

          Show
          Mary Evans added a comment - It shouldn't need the !important since body.lang-vi is unique, in that the rule is only when that vi lang file is selected. What interests me is why have you added other fonts, especially since the main font specified in the CSS rule is included in the theme. I'll assume that you did not have that font installed on your computer, otherwise you would not know if the font worked or not.
          Hide
          Amy Groshek added a comment - - edited

          Mary Evans has a point, but it still seems reasonable to provide fallback fonts. It does increase the size of your CSS a bit, but it's not going to break CSS hint or get in the way of subsequent child themes. Just in case for some reason that font file wasn't loading, because of a server performance issue or something, and it wasn't cached, you'd have your next best alternatives in the font stack.

          Show
          Amy Groshek added a comment - - edited Mary Evans has a point, but it still seems reasonable to provide fallback fonts. It does increase the size of your CSS a bit, but it's not going to break CSS hint or get in the way of subsequent child themes. Just in case for some reason that font file wasn't loading, because of a server performance issue or something, and it wasn't cached, you'd have your next best alternatives in the font stack.
          Hide
          Koen Roggemans added a comment -

          Hi Mary and Amy,
          Thanks a lot for your input - I'm by any means not a CSS guru
          All the problem area's you mention are copied from the standard theme (the !important tag and the fall back list)
          It does work indeed with
          @font-face

          { font-family:'OpenDyslexic'; src: url('[[font|OpenDyslexic-Regular.otf]]'); font-weight: normal; font-style: normal; }

          html, body#tinymce

          {background-color:#FAFAFA;}

          body

          {font-family:OpenDyslexic;padding: 4px;}

          body.lang-vi

          {font-family:OpenDyslexic;}

          I didn' think of it before, but it might be enough to only have that, since it will inherit everything else from standard, right?

          Show
          Koen Roggemans added a comment - Hi Mary and Amy, Thanks a lot for your input - I'm by any means not a CSS guru All the problem area's you mention are copied from the standard theme (the !important tag and the fall back list) It does work indeed with @font-face { font-family:'OpenDyslexic'; src: url('[[font|OpenDyslexic-Regular.otf]]'); font-weight: normal; font-style: normal; } html, body#tinymce {background-color:#FAFAFA;} body {font-family:OpenDyslexic;padding: 4px;} body.lang-vi {font-family:OpenDyslexic;} I didn' think of it before, but it might be enough to only have that, since it will inherit everything else from standard, right?
          Hide
          Mary Evans added a comment -

          @Koen Correct!

          Show
          Mary Evans added a comment - @Koen Correct!
          Hide
          Mary Evans added a comment -

          What we could actually do with to make this easier for everyone is have a setting as described by Gareth, that of a font setting similar to [[pix:theme|imagefile]] but instead of an image a font can be found using [[font:theme|fontname]], but not knowing how this can be done I'm stuck. So any help with this would be a bonus.

          Show
          Mary Evans added a comment - What we could actually do with to make this easier for everyone is have a setting as described by Gareth, that of a font setting similar to [ [pix:theme|imagefile] ] but instead of an image a font can be found using [ [font:theme|fontname] ], but not knowing how this can be done I'm stuck. So any help with this would be a bonus.
          Hide
          Gareth J Barnard added a comment -

          As '[[pix:theme|imagefile]]' works, then it cannot be to difficult to copy / rename the code. Famous last words.

          Show
          Gareth J Barnard added a comment - As '[ [pix:theme|imagefile] ]' works, then it cannot be to difficult to copy / rename the code. Famous last words.
          Hide
          Mary Evans added a comment -

          Yeah but where is it coded?
          It's like looking for a needle in a haystack.

          Show
          Mary Evans added a comment - Yeah but where is it coded? It's like looking for a needle in a haystack.
          Hide
          Gareth J Barnard added a comment -

          Dear Mary Evans,

          After using an industrial strength metal detector (Netbeans 7.2), I've tracked down the code to the method 'post_process()' in the file '/lib/outputlib.php'. As for the changes, well...

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Dear Mary Evans , After using an industrial strength metal detector (Netbeans 7.2), I've tracked down the code to the method 'post_process()' in the file '/lib/outputlib.php'. As for the changes, well... Cheers, Gareth
          Hide
          Ray Lawrence added a comment -

          I can't get this to work where the theme is in an alternative theme folder. I've tried an absolute server path but still no joy.

          If implemented in core this would need to work with $CFG->themedir

          Is there a way to get it working in the interim?

          Show
          Ray Lawrence added a comment - I can't get this to work where the theme is in an alternative theme folder. I've tried an absolute server path but still no joy. If implemented in core this would need to work with $CFG->themedir Is there a way to get it working in the interim?
          Hide
          Nadav Kavalerchik added a comment - - edited

          I am not sure we need to use CSS post processing on this one.

          I was adding a few @font-face to one of our themes doing the following steps:
          (1) Used fontsquirrel.com to upload a ttf font get back a @font-face friendly folder
          (2) Placed the somefont folder under mytheme/styles/somefont
          (3) Added to mytheme/config.php , $THEME->sheets the somefont/stylesheet.css
          (4) Use the font on any css file,

           .class {font:somefont;}

          Hope it helps

          Show
          Nadav Kavalerchik added a comment - - edited I am not sure we need to use CSS post processing on this one. I was adding a few @font-face to one of our themes doing the following steps: (1) Used fontsquirrel.com to upload a ttf font get back a @font-face friendly folder (2) Placed the somefont folder under mytheme/styles/somefont (3) Added to mytheme/config.php , $THEME->sheets the somefont/stylesheet.css (4) Use the font on any css file, .class {font:somefont;} Hope it helps
          Hide
          Gareth J Barnard added a comment -

          Dear Nadav Kavalerchik,

          You need CSS post processing to specify the domain element of the 'src: url' attribute of @font-face because like pix_url this needs to be completed if you have moodle installed in a sub-folder.

          For example if you have:

          @font-face {
              font-family: 'Quicksand Book'; 
              font-weight: normal;
              font-style: normal;
              src: url('/theme/mytheme/styles/font/Quicksand_Book.otf');
          }
          

          Then this works fine with the url 'http://myvle/' but not with 'http://myvle/moodle24/' as the font file cannot be found because the css thinks the url is 'http://myvle/theme/mytheme/styles/font/Quicksand_Book.otf' in both cases. Therefore you need css like:

          @font-face {
              font-family: 'Quicksand Book'; 
              font-weight: normal;
              font-style: normal;
              src: url('[[setting:fontwww]]Quicksand_Book.otf');
          }
          

          and post processing php like:

          function shoelace_set_fontwww($css) {
              global $CFG;
              $tag = '[[setting:fontwww]]';
              $css = str_replace($tag, $CFG->wwwroot . '/theme/shoelace/style/font/', $css);
              return $css;
          }
          

          I hope this makes sense

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Dear Nadav Kavalerchik , You need CSS post processing to specify the domain element of the 'src: url' attribute of @font-face because like pix_url this needs to be completed if you have moodle installed in a sub-folder. For example if you have: @font-face { font-family: 'Quicksand Book'; font-weight: normal; font-style: normal; src: url('/theme/mytheme/styles/font/Quicksand_Book.otf'); } Then this works fine with the url 'http://myvle/' but not with 'http://myvle/moodle24/' as the font file cannot be found because the css thinks the url is 'http://myvle/theme/mytheme/styles/font/Quicksand_Book.otf' in both cases. Therefore you need css like: @font-face { font-family: 'Quicksand Book'; font-weight: normal; font-style: normal; src: url('[[setting:fontwww]]Quicksand_Book.otf'); } and post processing php like: function shoelace_set_fontwww($css) { global $CFG; $tag = '[[setting:fontwww]]'; $css = str_replace($tag, $CFG->wwwroot . '/theme/shoelace/style/font/', $css); return $css; } I hope this makes sense Cheers, Gareth
          Hide
          Nadav Kavalerchik added a comment -

          Thank you Gareth for the detailed example. Now I understand the situation better.
          I was not considering a subfolder. My mistake. (We are using a simple domain with no subfolders, I guess this is why it works)

          Indeed, your generic suggestion seems great

          Show
          Nadav Kavalerchik added a comment - Thank you Gareth for the detailed example. Now I understand the situation better. I was not considering a subfolder. My mistake. (We are using a simple domain with no subfolders, I guess this is why it works) Indeed, your generic suggestion seems great
          Hide
          Mary Evans added a comment -

          Petr, any chance you could add some Test Instructions?

          Just wondering if the @font-face will be able to uses something similar to url([[pix:theme|images/logo]]):

          
               url([[font:theme|font/fancyfontname]]);
          
          
          Show
          Mary Evans added a comment - Petr, any chance you could add some Test Instructions? Just wondering if the @font-face will be able to uses something similar to url([ [pix:theme|images/logo] ]): url([[font:theme|font/fancyfontname]]);
          Hide
          Petr Škoda added a comment - - edited

          Hi Mary, I am working on that, I just wanted to push my current code somewhere online before my lunch.

          I will publish sample commits that demonstrate this new feature later.

          It is very similar to current "pix":

          1. the fonts are stored in lib/fonts/ for core and mod/xxx/fonts/ for plugins
          2. themes can override the fonts in theme/yyy/fonts_core/, theme/yyy/fonts_plugins/
          3. theme specific fonts are in theme/yyy/fonts/*
          4. [[font:xxx|somefont.woff]] is replaced by font url in CSS (note the extension is mandatory, subdirectories are not allowed)
          Show
          Petr Škoda added a comment - - edited Hi Mary, I am working on that, I just wanted to push my current code somewhere online before my lunch. I will publish sample commits that demonstrate this new feature later. It is very similar to current "pix": the fonts are stored in lib/fonts/ for core and mod/xxx/fonts/ for plugins themes can override the fonts in theme/yyy/fonts_core/, theme/yyy/fonts_plugins/ theme specific fonts are in theme/yyy/fonts/* [ [font:xxx|somefont.woff] ] is replaced by font url in CSS (note the extension is mandatory, subdirectories are not allowed)
          Hide
          Mary Evans added a comment -

          Sounds interesting. Looking forward to testing this when you have it finished.

          Many thanks

          Show
          Mary Evans added a comment - Sounds interesting. Looking forward to testing this when you have it finished. Many thanks
          Hide
          Gareth J Barnard added a comment -

          Dear Petr Škoda,

          Will there be a 'course/format/yyy/fonts/' folder?

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Dear Petr Škoda , Will there be a 'course/format/yyy/fonts/' folder? Cheers, Gareth
          Hide
          Petr Škoda added a comment -

          all plugins and subplugins are supported

          Show
          Petr Škoda added a comment - all plugins and subplugins are supported
          Hide
          Mary Evans added a comment -

          Tested it and it works great. (See uploaded image) Thank you for the work you have put into this Petr, it is very much appreciated by the theme developers and the Moodle community too.

          Thank you also for the test branch that was very useful.

          Show
          Mary Evans added a comment - Tested it and it works great. (See uploaded image) Thank you for the work you have put into this Petr, it is very much appreciated by the theme developers and the Moodle community too. Thank you also for the test branch that was very useful.
          Hide
          Mary Evans added a comment -

          Show
          Mary Evans added a comment -
          Hide
          Eloy Lafuente (stronk7) added a comment -

          0. Has been integrated already because of MDL-40545 built on top of this.

          1. Looks perfect.

          2. Needs MD's approval.

          3. Just imagining it there will be a point about to have a switcher to disable plugin fonts. Just imagining a very nice plugins using a too-much-awesome (lol) font. Being able to disable developer tastes would be great (and easy to implement), IMO.

          So, holding it a bit for some feedback. Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - 0. Has been integrated already because of MDL-40545 built on top of this. 1. Looks perfect. 2. Needs MD's approval. 3. Just imagining it there will be a point about to have a switcher to disable plugin fonts. Just imagining a very nice plugins using a too-much-awesome (lol) font. Being able to disable developer tastes would be great (and easy to implement), IMO. So, holding it a bit for some feedback. Ciao
          Hide
          Mary Evans added a comment -

          You are probably right Eloy, but we can already block plugin stylesheets in a theme's config.php with:

          
          $THEME->plugins_exclude_sheets = array(
              'block' => array(
                  'html'
              ),
              'gradereport' => array(
                  'grader',
              ),
          );
          
          

          Which is what is in bootstrapbase already.

          Show
          Mary Evans added a comment - You are probably right Eloy, but we can already block plugin stylesheets in a theme's config.php with: $THEME->plugins_exclude_sheets = array( 'block' => array( 'html' ), 'gradereport' => array( 'grader', ), ); Which is what is in bootstrapbase already.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          My 3. above is only about being able to disable plugin fonts (all them, together, with an unique switcher). Mainly because I would want to have my whole site working with, say, formalwhite appearance, not allowing plugins to be much imaginative. Not the whole plugin css, but the included fonts for them only.

          Show
          Eloy Lafuente (stronk7) added a comment - My 3. above is only about being able to disable plugin fonts (all them, together, with an unique switcher). Mainly because I would want to have my whole site working with, say, formalwhite appearance, not allowing plugins to be much imaginative. Not the whole plugin css, but the included fonts for them only.
          Hide
          Mary Evans added a comment -

          Yes...I see what you mean. Good thinking Batman!

          Show
          Mary Evans added a comment - Yes...I see what you mean. Good thinking Batman!
          Hide
          Petr Škoda added a comment -

          3/ What? If some plugin does weird thing with fonts you can either replace the font or override the CSS in theme. I managed to bork the file serving and believe it was not visually nice (serif) without the actual font file, why would anybody want to do that? I hope you did you mean to create some crazy regex to comb through plugin CSS and trying to replace custom font face with some random default fonts.

          Show
          Petr Škoda added a comment - 3/ What? If some plugin does weird thing with fonts you can either replace the font or override the CSS in theme. I managed to bork the file serving and believe it was not visually nice (serif) without the actual font file, why would anybody want to do that? I hope you did you mean to create some crazy regex to comb through plugin CSS and trying to replace custom font face with some random default fonts.
          Hide
          Martin Dougiamas added a comment - - edited

          Belated +1 for the basic idea of this issue as long as themers are happy.

          Show
          Martin Dougiamas added a comment - - edited Belated +1 for the basic idea of this issue as long as themers are happy.
          Hide
          David Scotson added a comment -

          Regarding Eloy's kill switch, if fonts are used for icons (which I hope they will be) then switching off fonts might have unexpected results. There's no real reason for someone to know that an image is a font rather than an SVG.

          Also people could use it for a) providing fonts for rare languages, b) providing fonts for Maths/Music/Chemistry, c) accessible fonts (e.g. for dyslexic people) so a general font on/off switch that assumes fonts are just to make text look different is too broad.

          I'd also hope that individual plugins wouldn't really be using this functionality just to make their plugin look "cool" since it makes it much harder for a theme or site owner to select a font (or two) for branding purposes and have it consistently applied across the site.

          Show
          David Scotson added a comment - Regarding Eloy's kill switch, if fonts are used for icons (which I hope they will be) then switching off fonts might have unexpected results. There's no real reason for someone to know that an image is a font rather than an SVG. Also people could use it for a) providing fonts for rare languages, b) providing fonts for Maths/Music/Chemistry, c) accessible fonts (e.g. for dyslexic people) so a general font on/off switch that assumes fonts are just to make text look different is too broad. I'd also hope that individual plugins wouldn't really be using this functionality just to make their plugin look "cool" since it makes it much harder for a theme or site owner to select a font (or two) for branding purposes and have it consistently applied across the site.
          Hide
          Petr Škoda added a comment -

          Thanks David, I agree that my book example should be replaced by something better because it is definitely the wrong way to use fonts in plugins.

          Show
          Petr Škoda added a comment - Thanks David, I agree that my book example should be replaced by something better because it is definitely the wrong way to use fonts in plugins.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          +1

          Show
          Eloy Lafuente (stronk7) added a comment - +1
          Hide
          Mary Evans added a comment -

          +1

          Show
          Mary Evans added a comment - +1
          Hide
          Sam Hemelryk added a comment -

          Putting this up for testing as it has already been integrated and its getting +1's

          Sounds like the switch would introduce problems with people utilising fonts for other things which is a fair point.

          Show
          Sam Hemelryk added a comment - Putting this up for testing as it has already been integrated and its getting +1's Sounds like the switch would introduce problems with people utilising fonts for other things which is a fair point.
          Hide
          Rossiani Wijaya added a comment -

          Hi Petr,

          While testing this, I tried to use .otf font. I have looked for supported type for @font-face and it should work for chrome and firefox, however it doesn't work for my site. If I converted the font to .woff, it works fine.

          Could you provide some advice regarding this?

          Thank you.

          Show
          Rossiani Wijaya added a comment - Hi Petr, While testing this, I tried to use .otf font. I have looked for supported type for @font-face and it should work for chrome and firefox, however it doesn't work for my site. If I converted the font to .woff, it works fine. Could you provide some advice regarding this? Thank you.
          Hide
          Petr Škoda added a comment -

          I guess it does not work because I borked the regex matching after I tested it. Fixing...

          Show
          Petr Škoda added a comment - I guess it does not work because I borked the regex matching after I tested it. Fixing...
          Hide
          Petr Škoda added a comment -

          Fixed, thanks a lot for discovering this problem!

          Show
          Petr Škoda added a comment - Fixed, thanks a lot for discovering this problem!
          Hide
          Sam Hemelryk added a comment -

          Fix pulled in - this is ready once more

          Show
          Sam Hemelryk added a comment - Fix pulled in - this is ready once more
          Hide
          Rossiani Wijaya added a comment -

          Thanks Petr and Sam.

          I will retest this again asap.

          Show
          Rossiani Wijaya added a comment - Thanks Petr and Sam. I will retest this again asap.
          Hide
          Rossiani Wijaya added a comment -

          This is working great.

          Tested for master only.

          Test passed.

          Show
          Rossiani Wijaya added a comment - This is working great. Tested for master only. Test passed.
          Hide
          Damyon Wiese added a comment -

          Thanks again for another week of fixes, improvements and testing. These changes have been released to the world.

          Cheers, Damyon

          Show
          Damyon Wiese added a comment - Thanks again for another week of fixes, improvements and testing. These changes have been released to the world. Cheers, Damyon
          Hide
          Martin Dougiamas added a comment -

          Note this is only going to work from 2.6, so it would be good to have a documented hack for the 100% of people who are on older versions.

          Show
          Martin Dougiamas added a comment - Note this is only going to work from 2.6, so it would be good to have a documented hack for the 100% of people who are on older versions.
          Hide
          Mary Evans added a comment -

          @Martin,
          We already have some themes that allow Admins to set different fonts, and have done for nearly a year now, albeit that they work in a different way, they do work.

          Show
          Mary Evans added a comment - @Martin, We already have some themes that allow Admins to set different fonts, and have done for nearly a year now, albeit that they work in a different way, they do work.
          Hide
          Mary Evans added a comment -

          @Petr, Just a note to say thank-you for all the hard work getting this to work, it is much appreciated by the Theming community.
          Cheers
          Mary

          Show
          Mary Evans added a comment - @Petr, Just a note to say thank-you for all the hard work getting this to work, it is much appreciated by the Theming community. Cheers Mary
          Hide
          Petr Škoda added a comment -

          they may work only if you do not use alternative $CFG->themedir

          I doubt we should encourage any particular hacks in stable branches

          Show
          Petr Škoda added a comment - they may work only if you do not use alternative $CFG->themedir I doubt we should encourage any particular hacks in stable branches
          Hide
          David Scotson added a comment -

          What is stopping the same syntax and code being reused in a theme lib function for previous versions?

          Show
          David Scotson added a comment - What is stopping the same syntax and code being reused in a theme lib function for previous versions?
          Hide
          Martin Dougiamas added a comment -

          A backport would be ideal for us (we need it for a 2.5.x project here).

          Failing that, what is the recommended way to include a font in a 2.5 theme?

          Show
          Martin Dougiamas added a comment - A backport would be ideal for us (we need it for a 2.5.x project here). Failing that, what is the recommended way to include a font in a 2.5 theme?
          Hide
          David Scotson added a comment -

          Is it for a redistributable theme? If not then just hardcoding the url in the CSS to the known file location is fairly easy.

          It gets trickier when you don't know exactly where the font will be located due to various Moodle install settings, which makes it hard for themers who sell or otherwise distribute their themes for people to use in their own setups.

          Generally I'd recommend linking to a Google Font or CDN hosted file whenever that is possible anyway (for speed reasons mostly), which has always just worked. Not ideal if you've got a intranet site though.

          Show
          David Scotson added a comment - Is it for a redistributable theme? If not then just hardcoding the url in the CSS to the known file location is fairly easy. It gets trickier when you don't know exactly where the font will be located due to various Moodle install settings, which makes it hard for themers who sell or otherwise distribute their themes for people to use in their own setups. Generally I'd recommend linking to a Google Font or CDN hosted file whenever that is possible anyway (for speed reasons mostly), which has always just worked. Not ideal if you've got a intranet site though.
          Hide
          Gareth J Barnard added a comment -

          Firstly, can I second Mary's comment thanking Petr on his hard work with this.

          Currently the way of using a font locally in a M2.5 theme is through the employment of css pre-processing. This generates the correct URL in the css which employs the $CFG->wwwroot global to set the prefix of the path to find the font file. However as Petr points out this does not work with $CFG->themedir because the theme's folder could be outside the allowed serveable file area of the web server and hence requiring code to fetch and serve it.

          If you would like an example of font serving locally with css pre-processing on M2.5, please see my Shoelace theme -> https://moodle.org/plugins/view.php?plugin=theme_shoelace. I think I may have been the first to do it in this way.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Firstly, can I second Mary's comment thanking Petr on his hard work with this. Currently the way of using a font locally in a M2.5 theme is through the employment of css pre-processing. This generates the correct URL in the css which employs the $CFG->wwwroot global to set the prefix of the path to find the font file. However as Petr points out this does not work with $CFG->themedir because the theme's folder could be outside the allowed serveable file area of the web server and hence requiring code to fetch and serve it. If you would like an example of font serving locally with css pre-processing on M2.5, please see my Shoelace theme -> https://moodle.org/plugins/view.php?plugin=theme_shoelace . I think I may have been the first to do it in this way. Cheers, Gareth
          Hide
          David Scotson added a comment -

          Gareth J Barnard, the key bit from Petr's code seems to be this:

          if (file_exists("$CFG->dirroot/theme/$themename/config.php"))

          { // Normal theme exists. }

          else if (!empty($CFG->themedir) and file_exists("$CFG->themedir/$themename/config.php"))

          { // Theme exists in alternative location. }

          else

          { font_not_found(); }

          Which lets you test whether the current theme is located in the standard theme location or in the $CFG->themedir location.

          Would that not work with your code to allow us to create a standard lib function that replace [[font:theme|good_dog.woff]] with the appropriate url in any theme, and even those who use themedir as well? Then everyone can use the same format regardless of version, even if it doesn't have all the extra benefits of Petr's version.

          Show
          David Scotson added a comment - Gareth J Barnard , the key bit from Petr's code seems to be this: if (file_exists("$CFG->dirroot/theme/$themename/config.php")) { // Normal theme exists. } else if (!empty($CFG->themedir) and file_exists("$CFG->themedir/$themename/config.php")) { // Theme exists in alternative location. } else { font_not_found(); } Which lets you test whether the current theme is located in the standard theme location or in the $CFG->themedir location. Would that not work with your code to allow us to create a standard lib function that replace [ [font:theme|good_dog.woff] ] with the appropriate url in any theme, and even those who use themedir as well? Then everyone can use the same format regardless of version, even if it doesn't have all the extra benefits of Petr's version.
          Hide
          Gareth J Barnard added a comment -

          Dear David Scotson,

          No it would not work because as I already stated 'the theme's folder could be outside the allowed serveable file area of the web server'. So, because the css pre-processing method relies on an addressable URL then the web server would not be able fetch and serve it. I believe Petr's code works in the same way as the previously implemented 'logo' code in that it fetches the file and serves it out itself without relying on the web server's file serving mechanism. It's a sort of catch and serve mechanism using Moodle implemented file access permissions rather than web server permissions.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - Dear David Scotson , No it would not work because as I already stated 'the theme's folder could be outside the allowed serveable file area of the web server'. So, because the css pre-processing method relies on an addressable URL then the web server would not be able fetch and serve it. I believe Petr's code works in the same way as the previously implemented 'logo' code in that it fetches the file and serves it out itself without relying on the web server's file serving mechanism. It's a sort of catch and serve mechanism using Moodle implemented file access permissions rather than web server permissions. Cheers, Gareth
          Hide
          David Scotson added a comment -

          Do we have any idea how many sites use both (or either?) $CFG->themedir and place their themes outside of the normal public web directories? If it's a relatively small number then it might still be worth doing with a straight URL replacement.

          Show
          David Scotson added a comment - Do we have any idea how many sites use both (or either?) $CFG->themedir and place their themes outside of the normal public web directories? If it's a relatively small number then it might still be worth doing with a straight URL replacement.
          Hide
          Daniel Wahl added a comment -

          @David:

          our site was doing that because moodle core was stored straight in the web root and I didn't want to start adding non-core files into the core structure, so our setup looked something like this

          /htdocs/[moodle core]
          /logs/[apache logs]
          /data/moodledata/
          /data/moodlecache/
          /data/themes/[any extra themes]

          but once we switched to a theme with fontawesome and the font couldn't be served I had to remove cfg->themedir and move the themes into the core /theme/ folder.

          Show
          Daniel Wahl added a comment - @David: our site was doing that because moodle core was stored straight in the web root and I didn't want to start adding non-core files into the core structure, so our setup looked something like this /htdocs/ [moodle core] /logs/ [apache logs] /data/moodledata/ /data/moodlecache/ /data/themes/ [any extra themes] but once we switched to a theme with fontawesome and the font couldn't be served I had to remove cfg->themedir and move the themes into the core /theme/ folder.
          Hide
          Gareth J Barnard added a comment - - edited

          Dear Daniel Wahl,

          Font serving using '$CFG->themedir' is possible in M2.5 themes, just takes a bit of code. I was using the older mechanism until I changed Shoelace: https://github.com/gjb2048/moodle-theme_shoelace/blob/MOODLE_25/lib.php#L60 and https://github.com/gjb2048/moodle-theme_shoelace/blob/MOODLE_25/lib.php#L76 - using a hybrid of the new logo serving mechanism. So would be possible to adapt the theme you are using with fontawesome and keep '/data/themes/'.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - - edited Dear Daniel Wahl , Font serving using '$CFG->themedir' is possible in M2.5 themes, just takes a bit of code. I was using the older mechanism until I changed Shoelace: https://github.com/gjb2048/moodle-theme_shoelace/blob/MOODLE_25/lib.php#L60 and https://github.com/gjb2048/moodle-theme_shoelace/blob/MOODLE_25/lib.php#L76 - using a hybrid of the new logo serving mechanism. So would be possible to adapt the theme you are using with fontawesome and keep '/data/themes/'. Cheers, Gareth
          Hide
          Mary Evans added a comment -

          This issue is closed, so please do not continue your discussion here. If you need to ask for more improvements them please fee free to open new tracker issues to deal with them.

          Thank you.

          Show
          Mary Evans added a comment - This issue is closed, so please do not continue your discussion here. If you need to ask for more improvements them please fee free to open new tracker issues to deal with them. Thank you.

            People

            • Votes:
              19 Vote for this issue
              Watchers:
              23 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: