Themes

 
 
Picture of Rob Daglish
Use of font-face in a theme
 

I know it's possible to use font-face in a theme, I've managed to do it on my local testing server using http://localhost/theme/themename/fontname.ttf.

On the live server, I can't do the same thing really as security settings won't let me - is there a way I can script the path to the file like using the url([[pix:theme|gradient]]); style code? (I've tried using [[pix:theme|fontname]] on the off chance, but it didn't work...)

 

 

 
Average of ratings: -
Picture of David Scotson
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I asked a similar question a while back and I don't recall there being any good way to do it like the pix:theme stuff.
However this should work in your CSS if you know the theme name in advance:

url(theme_name/fonts/fontname.ttf)

Where theme_name is your theme name/directory, fonts is just any folders that you put the fonts in

You might also want to consider linking directly to fonts hosted on Google Webfonts (or alternatives) if they have the font as they do a few extra cool things to make it load faster and look better in various situations.

Previous discussion:
https://moodle.org/mod/forum/discuss.php?d=212973
 
Average of ratings:Useful (2)
Picture of Rob Daglish
Re: Use of font-face in a theme
 

Thanks both.  What I did in the end up was to pop the .ttf and an .eot I got converted for IE (Google will bring up a list of free conversion sites) in the pix folder of my theme, then added the following code to my CSS:

<code>

@font-face{

font-family:MyCustomFont;

src: url(theme_name/pix/MyCustomFont.eot);

}

@font-face{

font-family:MyCustomFont;

src: url(theme_name/pix/MyCustomFont.ttf) format ("truetype");

}

</code>

 

and then after a couple of refreshes, the font appeared in IE and Firefox.

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Rob,

You can actually add the font-face for both types if they are the same font.

@font-face
{
font-family: MyCustomFont;
src: url('MyCustomFont.ttf'),
       url('MyCustomFont.eot'); /* IE9 */
}

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Rob,

If you look at the way I added .ttf fonts to my theme HERE you might glean some ideas. The principle of the embedded fonts works, but I think I got my settings wrong looking at the code now, I just spotted a typo in one of the fonts. However you are free to use the code if it helps?

Cheers

Mary

 
Average of ratings:Useful (2)
Picture of suman bogati
Re: Use of font-face in a theme
 

Hi Mary,

Font face is working into moodle23 version if the 'designer mode' is on,

If we do the 'designer mode' off then it stops to work on theme, can you please tell me the reason for it, 

Does the font-face support for theme of moodle2.4 version?

Have a nice time.

 

 
Average of ratings: -
Picture of Otti Ott
Re: Use of font-face in a theme
 

Hi Suman, I just encountered the same problem. I added my fonts with font-face and all works fine when designer mode is on. Once it's off the fonts default back to standard fonts.

I tried to add them in my additional style sheet and into the core.css style sheet I use as an overwrite.

Did you solve your problem and if so can you direct me to a solution please?

Many thanks otti

 
Average of ratings: -
Picture of Richard Bakos
Re: Use of font-face in a theme
 

The method I've been using to get font-face to work consistently in my projects is as follows...

Add the following function in your themes lib.php file:

/**
* Implements font-face functionality in theme
*
*/
function mytheme_process_css($css, $theme) {
    global $CFG;
    // My Font 1
    $tag = '[[font:MyFont-eot]]';
    $replacement = $CFG->wwwroot.'/theme/mytheme/fonts/MyFont.eot';
    $css = str_replace($tag, $replacement, $css);
    $tag = '[[font:MyFont-eot-ie]]';
    $replacement = $CFG->wwwroot.'/theme/mytheme/fonts/MyFont.eot?#iefix';
    $css = str_replace($tag, $replacement, $css);
    $tag = '[[font:MyFont-ttf]]';
    $replacement = $CFG->wwwroot.'/theme/mytheme/fonts/MyFont.ttf';
    $css = str_replace($tag, $replacement, $css);
    $tag = '[[font:MyFont-woff]]';
    $replacement = $CFG->wwwroot.'/theme/mytheme/fonts/MyFont.woff';
    $css = str_replace($tag, $replacement, $css);
    $tag = '[[font:MyFont-svg]]';
    $replacement = $CFG->wwwroot.'/theme/mytheme/fonts/MyFont.svg#MyFont';
    $css = str_replace($tag, $replacement, $css);
    // My Font 2
    (Repeats the syntax above for another font)
    return $css;
}

Note: You can add more than one font to the same function

Add this to your themes CSS:

@font-face {
    font-family: 'MyFont';
    src: url([[font:MyFont-eot]]);
    src: url([[font:MyFont-eot-ie]]) format('embedded-opentype'),
           url([[font:MyFont-woff]]) format('woff'),
           url([[font:MyFont-ttf]]) format('truetype'),
           url([[font:MyFont-svg]]) format('svg');
    font-weight: normal;
    font-style: normal;
}

Now when you assign MyFont to an element in your CSS, it should display on screen with that font even with designer mode off.

I hope that helps ya out. Let us know the results.

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Richard,

That's overkill, you just need to sort out the 'www' prefix bit, so in Shoelace there is:

lib.php:

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

and in the css file:

@font-face {
font-family: 'MoodleTheme';
font-weight: normal;
font-style: normal;
src: url('setting:fontwwwQuicksand_Book.otf');
}

All you would need would be similar and:

@font-face {
    font-family'MyFont';
    srcurl([[font:MyFont]]MyFont.eot);
    srcurl([[font:MyFont]]MyFont.eot?#iefixformat('embedded-opentype'),
           url([[font:MyFont]]MyFont.ttfformat('woff'),
           url([[font:MyFont]]MyFont.woffformat('truetype'),
           url([[font:MyFont]]MyFont.svg#MyFontformat('svg');
    font-weightnormal;
    font-stylenormal;
}

So would reduce the PHP and be more flexible when you wanted to change / add more fonts as only css changes.

Cheers,

Gareth

P.S. Please look at the code in the plugin's DB as cannot get TinyMCE to display properly here!

 
Average of ratings:Useful (2)
Picture of Richard Bakos
Re: Use of font-face in a theme
 

Ahhh... Thanks for pointing me towards that logic Gareth! I'll be giving it a shot...

 
Average of ratings: -
Picture of F H
Re: Use of font-face in a theme
 

I am making use of font-face and it seems to be working although what i have done does not resemble anything mentioned here - can someone confirm if what i have done is ok?

[1] I am using decaf theme

[2] I created a folder for the webfonts i require in theme/decaf/style/

[3] In Site administration / Appearance / Themes / Decaf, I placed in the custom css area

@font-face {
font-family: MyFont;
font-style: normal;
font-weight: 400;
src: url('webfonts/MyFont-regular.eot?') format('eot'),
url('webfonts/MyFont-regular.woff') format('woff'),
url('webfonts/MyFont-regular.ttf') format('truetype');
}

and a few more declarations like this...

[4] I then added the font to the dropdown in the text editor so that I could select it

 

many thanks.

 

 
Average of ratings: -
Picture of David Scotson
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Are you sure it's working? Have you tried it from a computer/device that doesn't have the fonts installed?
 
Average of ratings: -
Picture of Richard Bakos
Re: Use of font-face in a theme
 

And have you tried it on a live server and not just your local machine? I've tried many implementations for font-face in moodle and have been fooled into thinking they work simply because I have the fonts installed on my computer or because of server environment. The only method I have managed to get it to work is the inline method mentioned here: https://moodle.org/mod/forum/discuss.php?d=230812

Not to say the other methods discussed don't work, I'm probably just missing something.

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Richard,

The method used in Shoelace mentioned above does work outside of the local machine because it places the declarations in the css files and not inline.  Please look at how Shoelace works.

Cheers,

Gareth

 
Average of ratings: -
Picture of Richard Bakos
Re: Use of font-face in a theme
 

Hello Gareth,

I tried your implementation in shoelace awhile ago and had no luck. When I tried to access the site from my Windows virtual machine the font didn't show up. If you look at my last comment on this post you can see my code: https://moodle.org/mod/forum/discuss.php?d=230812 

As far as I can tell, there is no difference between the code you used in shoelace for the fonts and mine, other than the theme name and font names.

The inline method worked on every computer and browser I tried... Other than IE8, of course.

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Richard,

Looking at the failed 'GET' request it looks like the setting is not being replaced.  Would you be able to post the code somewhere to have a look at?   As need to look at everything including 'config.php'.

Cheers,

Gareth

 
Average of ratings: -
Picture of Richard Bakos
Re: Use of font-face in a theme
 

Hello Gareth,

Sure thing! That would be great. I will post it somewhere for you to grab when I get back to the office tomorrow morning and then shoot you a PM.

Thanks for the assistance!

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Richard,

Took about five mins, but I've fixed it!

In your 'config.php' file you were not calling the function to process the css, so changed:

$THEME->csspostprocess = 'bootstrap_user_settings';

to

$THEME->csspostprocess = 'amda_process_css';

I did a search and could not find 'bootstrap_user_settings' so thought it was safe to remove.

And in 'lib.php' both 'amda_set_fontwww' and 'amda_set_customcss' did not have the square brackets in the setting replacement - new file attached.

Cheers,

Gareth

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Replacement 'config.php'....

 
Average of ratings:Useful (1)
Picture of Richard Bakos
Re: Use of font-face in a theme
 

Oi, I can't believe I missed those obvious things... Thank you so much for taking the time out to look at it for me Gareth, works like a charm now!

 
Average of ratings: -
It's only an avatar...
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

@font-face setting has just been integrated into Moodle and will be available when Moodle 2.6 is released later this year.  So something to look forward to!

Yeah!

cheers

 
Average of ratings:Useful (2)
Picture of F H
Re: Use of font-face in a theme
 

Yes I tried on two other computers and those fonts were not installed as they are specialist arabic fonts from here http://www.amirifont.org

I uploaded on the server the 15 variant webfonts it contained in the download.

 ps: btw where do downloaded fonts via font-face get installed to on the users computer? (mac)

 
Average of ratings: -
Picture of Paul Wood
Re: Use of font-face in a theme
 

Hi Gareth,

I'm having difficulty implementing your @font-face code.  As far as I can see I've done everything but I still get the same font (Arial) being displayed.  I've dropped my font files (OpenDyslexic) into the /Clean/style/font/ folder.

Modified lib.php

function theme_clean_process_css($css, $theme) {
...
    $css = theme_clean_set_customcss($css, $customcss);

    // Set the font path.
    $css = clean_set_fontwww($css);
...


    return $css;
}

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


Here's what I have in the Custom CSS box in the Clean settings page...

@font-face {
    font-family: 'OpenDyslexic';
    src: url([[font:OpenDyslexic]]OpenDyslexic-Regular.eot);
    src: url([[font:OpenDyslexic]]OpenDyslexic-Regular.eot?#iefix) format('embedded-opentype'),
           url([[font:OpenDyslexic]]OpenDyslexic-Regular.ttf) format('woff'),
           url([[font:OpenDyslexic]]OpenDyslexic-Regular.woff) format('truetype'),
           url([[font:OpenDyslexic]]OpenDyslexic-Regular.svg#MyFont) format('svg');
    font-weight: normal;
    font-style: normal;
}


How do I get Moodle to use the font for body text?

Any help much appreciated,

Thanks,
Paul

 

Edit: Also tried purging all caches but no luck.

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Paul,

From what you have described you are missing the $CFG.... bit in the config.php file and use of the font in your styles, please see http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp.

Cheers,

Gareth

 
Average of ratings: -
Picture of Paul Wood
Re: Use of font-face in a theme
 

Hi Gareth,

Sorry, I wasn't aware that I needed to put anything in the config.php files, only the lib.php?

What exactly goes in the config.php file?

Also, say if I wanted to style the H2 element, would this be the correct CSS?

.h2
    {
    font-family: OpenDyslexic-Regular;
    }

 

 

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Paul,

For the 'config.php' please see above.  You will need to call your process css function.

With the 'h2' you have you need to specify the font-face name you defined 'font-family: 'OpenDyslexic';' i.e. 'OpenDyslexic'.

Cheers,

Gareth

 
Average of ratings: -
Picture of Paul Wood
Re: Use of font-face in a theme
 

This line is already present in my config.php in Clean...

$THEME->csspostprocess = 'theme_clean_process_css';

Any ideas?

I've attached the config.php and lib.php in the attached zip file.

Here's the custom CSS I'm using in the Custom CSS box in the Clean settings page.

 

@font-face {     font-family: 'OpenDyslexic';
    src: url([[font:OpenDyslexic]]OpenDyslexic-Regular.eot);
    src: url([[font:OpenDyslexic]]OpenDyslexic-Regular.eot?#iefix) format('embedded-opentype'),
        url([[font:OpenDyslexic]]OpenDyslexic-Regular.ttf) format('woff'),
        url([[font:OpenDyslexic]]OpenDyslexic-Regular.woff) format('truetype'),
        url([[font:OpenDyslexic]]OpenDyslexic-Regular.svg#OpenDyslexic) format('svg')
    font-weight: normal;
    font-style: normal;
}

h2.{
    font-family: 'OpenDyslexic';
}

 

Cheers,
Paul

 
Average of ratings: -
Gareth J Barnard
Re: Use of font-face in a theme
Group DevelopersGroup Particularly helpful Moodlers

Dear Paul,

Staring both of us in the face!  You have used 'font:OpenDyslexic' instead of 'setting:fontwww' in the square bracketed part of the URL which is why:

$tag = 'setting:fontwww';
$css = str_replace($tag, $CFG->wwwroot . '/theme/clean/style/font/', $css);

in 'clean_set_fontwww' in 'lib.php' cannot replace it.

Cheers,

Gareth

 
Average of ratings: -
Picture of David Scotson
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Your function clean_set_fontwww($css) seems to be looking for setting:fontwww where your CSS has [[font:OpenDyslexic]], you should change the latter in your CSS to match the former.

Generally to track down what's going wrong it's best to look at the CSS that gets produced, and then search for OpenDyslexic to see how it looks after it's been processed by Moodle.

Also, though probably just a typo .h2 and h2. are incorrect, you'd just use h2 (without any dots) in your CSS to target h2 tags.
 
Average of ratings: -
Picture of Paul Wood
Re: Use of font-face in a theme
 

Thanks Gareth and David, all is working well now after changing the CSS

Now to duplicate the Clean theme a few times and alter the CSS on each to offer different background colours and fonts for our learners before Ofsted pay us a visit!  It's a change the 'Accessibility' block doesn't work well with the Clean theme and doesn't offer the ability to change fonts. Doesn't look to be actively developed either which is a shame.

Cheers guys,
Paul

 
Average of ratings: -
It's only an avatar...
Re: Use of font-face in a theme
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I just noticed that you forgot to add theme in front of this function in the lib.php you uploaded in one of your previous posts...

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

It should read like so...

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

As for the Accessibility Blocks...its author, Mark Johnson, cannot add fonts to it yet as this functionality is not available in Moodle until 2.6 is released later this year, then things may change. You will be able to add as many fonts as you like to a theme, and all you will need to do is follow these guidelines to the letter...

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

Cheers

Mary

 
Average of ratings: -