Embed fonts in Moodle 2+ (a possible solution)

Embed fonts in Moodle 2+ (a possible solution)

by David Herney -
Number of replies: 7
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hi,
 
I've seen in so many threads people asking how to embed fonts in a Moodle 2+ Theme. Here's the solution i came up with. Hope it will help someone.
 

1. Open layout/general.php (and others layout files if you need)

2. Add the @fontface declaration just before de head ends (</head>). Make sure you update the declaration with the font file, name of your theme and the name of the folder containing the font:


<style>

@font-face {
font-family:'helvetica;
src: url('<?php echo $CFG->wwwroot; ?>/theme/theme_name/folder_name_containing_font/HelveticaNeueLTStd-Hv.otf') format('otf'), url('<?php echo $CFG->wwwroot; ?>/theme/theme_name/folder_name_containing_font/HelveticaNeueLTStd-Hv.otf') format('opentype');
}
</style>



3. Go to the css of your theme and call the font where you need it. Example:

body { font-family:'helvetica'; }

 

And thats's it.

 

Suerte

 

Average of ratings: -
In reply to David Herney

Re: Embed fonts in Moodle 2+ (a possible solution)

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

Dear David,

An interesting solution, but the snag with inline CSS is that it is not cached locally and therefore inefficient.  Only CSS that absolutely depends on changing variables per user should be done this way.  The 'cached' solution can be found in the Shoelace theme where I get around the '$CFG->wwwroot' issue by using the pre-processing methods in 'lib.php'.

However, that said, there is always lots of ways to solve a problem and variety is the spice of life smile

Cheers,

Gareth

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

Re: Embed fonts in Moodle 2+ (a possible solution)

by David Herney -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ohh, Your solution is very good technically . My solution is a fast one for a designer friend who doesn't have programming knowledge. She asked me for an easy way, but I am going to explain her your solution too so she can improve her theme.

However, the layout pages are build in cache too, aren't they? The URI is only build in the initial html compilation ¿am I right?

Saludos

 

Average of ratings: -
In reply to David Herney

Re: Embed fonts in Moodle 2+ (a possible solution)

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

Dear David,

I believe that the layout pages are not in cache as you can change them and see the effect without a 'Purge all caches'.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Embed fonts in Moodle 2+ (a possible solution)

by David Herney -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

ahhh.. of course, in order to insert generated html, It's logic. I didn't thought  in that. tongueouttongueout

Thanks

Saludos

Average of ratings: -
In reply to Gareth J Barnard

Re: Embed fonts in Moodle 2+ (a possible solution)

by Richard Bakos -

This did not work for me... I downloaded the shoelace theme and tried to implement your fontface method. I get a 404 for the font... 

Here is the lib code in it's entirety:

<?php

defined('MOODLE_INTERNAL') || die();

function amda_user_settings($css, $theme) {
global $CFG;
if (!empty($theme->settings->customcss)) {
$customcss = $theme->settings->customcss;
} else {
$customcss = null;
}

$tag = 'setting:customcss';
$css = str_replace($tag, $customcss, $css);


if ($theme->settings->enableglyphicons == 1) {
$amdaicons = '
[class ^="icon-"],[class *=" icon-"] { background-image: url("'.$CFG->wwwroot.'/theme/image.php?theme=amda&component=theme&image=glyphicons-halflings"); }';
$css .= $amdaicons;
}

$navlogowidth = 40;
$navlogoheight = 40;

if (!empty($theme->settings->navlogo_height)) {
$navlogoheight = $theme->settings->navlogo_height;
}

if (!empty($theme->settings->navlogo_width)) {
$navlogowidth = $theme->settings->navlogo_width;
}
$extrapadding = 40 + $navlogowidth;
if (!empty($theme->settings->navlogo_url)) {
$css .= '
@media ( min-width : 980px) {
.navbar .brand {
padding-left: 40px;
}
.navbar-static-top .container .nav-collapse, .navbar-fixed-top .container .nav-collapse, .navbar-fixed-bottom .container .nav-collapse {
padding-left: '.$extrapadding.'px;
}
}';
}

return $css;
}

/**
* Implements font-face functionality in theme
* Only disabled as we may opt to use webfonts at a later time
*
*/
function amda_process_css($css, $theme) {
$css = amda_set_fontwww($css);

// Set custom CSS.
if (!empty($theme->settings->customcss)) {
$customcss = $theme->settings->customcss;
} else {
$customcss = null;
}
$css = amda_set_customcss($css, $customcss);

return $css;
}

function amda_set_fontwww($css) {
global $CFG;
$tag = 'setting:fontwww';
$css = str_replace($tag, $CFG->wwwroot . '/theme/amda/fonts/', $css);
return $css;
}

function amda_set_customcss($css, $customcss) {
$tag = 'setting:customcss';
$replacement = $customcss;
if (is_null($replacement)) {
$replacement = '';
}

$css = str_replace($tag, $replacement, $css);

return $css;
}

 

And here is my CSS for the fonts:

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

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

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

A screen capture of my console:

Console

Average of ratings: -
In reply to Gareth J Barnard

Re: Embed fonts in Moodle 2+ (a possible solution)

by julie prescott -

Gareth, I implemented your solution from your Shoelace theme and it worked a treat! Thank-you for sharing smile

Average of ratings: Useful (1)
In reply to David Herney

Re: Embed fonts in Moodle 2+ (a possible solution)

by David Bogner -
Picture of Core developers Picture of Plugin developers

Hi,

we did solve that this way:

1) Place a font (all its variants like eot, ttf, otf, etc.) in fonts dir (for better browser support that's the best way)

2) Add that function in lib.php (replace your theme name)

function squared_include_fonts($css){
    global $CFG, $PAGE;
    if(empty($CFG->themewww)){
        $themewww = $CFG->wwwroot."/theme";
    } else {
        $themewww = $CFG->themewww;
    }
    $tag ='setting:fontface';
    $replacement = '
    @font-face {
    font-family: \'RudaBold\';
    src: url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-bold-webfont.eot\');
    src: url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-bold-webfont.eot?#iefix\') format(\'embedded-opentype\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-bold-webfont.woff\') format(\'woff\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-bold-webfont.ttf\') format(\'truetype\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-bold-webfont.svg#RudaBold\') format(\'svg\');
    font-weight: normal;
    font-style: normal;

    }
    @font-face {
    font-family: \'RudaRegular\';
    src: url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-regular-webfont.eot\');
    src: url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-regular-webfont.eot?#iefix\') format(\'embedded-opentype\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-regular-webfont.woff\') format(\'woff\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-regular-webfont.ttf\') format(\'truetype\'),
         url(\''.$themewww.'/'.$PAGE->theme->name.'/fonts/ruda-regular-webfont.svg#RudaRegular\') format(\'svg\');
    font-weight: normal;
    font-style: normal;
    }    
          
    ';
    $css = str_replace($tag, $replacement, $css);
    return $css;
}

3) Add the function to your function tothe process css function:

yourthemname_process_css($css, $theme) {
//
    $css = squared_include_fonts($css, $theme);

}

Average of ratings: Useful (2)