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:

      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

        Gliffy Diagrams

          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 Skoda 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 Skoda 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 Skoda,

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

            Cheers,

            Gareth

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

            all plugins and subplugins are supported

            Show
            Petr Skoda 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 Skoda 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 Skoda 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 Skoda 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 Skoda 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 Skoda added a comment -

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

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

            Fixed, thanks a lot for discovering this problem!

            Show
            Petr Skoda 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 Skoda 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 Skoda 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: