I was playing around with the @font-face property within the css of a moodle 2.0 theme.
If I use it like this:
@font-face {
font-family: Junction;
src: url(/moodle2/theme/arialD/pix/Junction_02.ttf) format("truetype");
}
it works fine but won't work for anyone else who installs the theme in a different location... If I do this:
@font-face {
font-family: Junction;
src: url([[pix:theme|Junction_02]]) format("truetype");
}
It does not work... Any ideas?
Is there any Moodle documentation for using @font-face format in Moodle 2.0?
I've looked and can't find any, so my guess is that the pix notation you are using in your second example is incorrect. If this works in the standard css format then why not use that? I am assuming that you are adding a font file in your pix folder as part of a theme package? In which case I would have thought it would work in any case.
I've looked and can't find any, so my guess is that the pix notation you are using in your second example is incorrect. If this works in the standard css format then why not use that? I am assuming that you are adding a font file in your pix folder as part of a theme package? In which case I would have thought it would work in any case.
I don't see any docs for it. Yes, I would add the font to the pix folder. The standard css for it works, but then I would need to use that @font-face css in the layout page instead of in a css file (and use php to specify the path to the font).
I wasn't aware you could include a font within the theme so that it could be selected from within Moodle.
I have only ever used @font-face in connection with EOT (Embedded Open Type) files created using WEFT. But I stopped using them when I found Firefox did not support them. They only seem to be supported in IE, pity really because I found them very useful. But I've never seen this done with ttf files.
The @font-face css in the header went something like this...
I have only ever used @font-face in connection with EOT (Embedded Open Type) files created using WEFT. But I stopped using them when I found Firefox did not support them. They only seem to be supported in IE, pity really because I found them very useful. But I've never seen this done with ttf files.
The @font-face css in the header went something like this...
<style type="text/css">
<!--
@font-face {
font-family: P22DV;
font-style: normal;
font-weight: normal;
src: url(PDAVINC3.eot); }
-->
</style> where the eot file was in the root directory. Perhaps that's a clue!
What if you upload the ttf files to Admin files (moodledata folder). Mary
Hi,
I was not aware of the availability of @font-face in 2.0 themes. This would be quite useful for language courses that need IPA fonts such as the SIL ones. I'll experiment and report.
Joseph
I was not aware of the availability of @font-face in 2.0 themes. This would be quite useful for language courses that need IPA fonts such as the SIL ones. I'll experiment and report.
Joseph
Hi guys,
Indeed presently within Moodle 2 the only things that get parsed within a CSS file are images using the [[pix:stuff|morestuff]] notation.
I'm not aware of any plans to implement such a system for font-face or more generally any other type of media or file... to be truthful it probably wasn't thought of
I've created a tracker issue on which people can vote if they want MDL-23493.
I'm not too sure whether it will get looked at before the release of 2.0 however it is possible to achieve this through you theme if you want to get it ahead of time.
The following code is a VERY quick/rough guide about how to do that.
In your css you can now put:
Then just put your fontname.ttf file within your theme directory, if you've already created a post process function you can just add the function content to the end of your function.
This solution isn't 100% ideal but it should work.
Cheers
Sam
Indeed presently within Moodle 2 the only things that get parsed within a CSS file are images using the [[pix:stuff|morestuff]] notation.
I'm not aware of any plans to implement such a system for font-face or more generally any other type of media or file... to be truthful it probably wasn't thought of
I've created a tracker issue on which people can vote if they want MDL-23493.
I'm not too sure whether it will get looked at before the release of 2.0 however it is possible to achieve this through you theme if you want to get it ahead of time.
The following code is a VERY quick/rough guide about how to do that.
// In your themes config.php
$THEME->csspostprocess = 'yourthemename_process_css';
// In your themes lib.php file (create one if you don't already have one
function yourthemename_process_css($css, $theme) {
global $CFG;
$tag = '[[font:fontname]]';
$replacement = $CFG->wwwroot.'/theme/themename/fontname.ttf';
$css = str_replace($tag, $replacement, $css);
return $css;
}
In your css you can now put:
@font-face {
src : url([[font:fontname]]) format('truetype');
}
Then just put your fontname.ttf file within your theme directory, if you've already created a post process function you can just add the function content to the end of your function.
This solution isn't 100% ideal but it should work.
Cheers
Sam
It's not quite as complicated if you're using Google WebFonts, but the font selections are somewhat limited.
For example, to use Droid Sans as the main font:
For example, to use Droid Sans as the main font:
/* At the top of your CSS file */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
body {
font-family: 'Droid Sans', arial, sans-serif;
}
Darryl,
As you say the choice of Google fonts is indeed limited. And it would not help in the case I mentioned in my post of a teacher who wants to use IPA fonts.
Joseph
As you say the choice of Google fonts is indeed limited. And it would not help in the case I mentioned in my post of a teacher who wants to use IPA fonts.
Joseph
Thanks Sam, that's what I was looking for. I do think this property will become more commonly used, so I'll vote for the issue...
Sam:
In your css you can now put:
@font-face {
src : url([[font:fontname]]) format('truetype');
}
Er, what do you mean by "in your css" ? where is that? in one of the theme's *.CSS files? in HTML code when you edit a text? Something/where else?
Joseph
EDIT.- Sam, I've taken all of the steps you describe but am stuck as to how and where I can actually display text in the font I specified.
In your css you can now put:
@font-face {
src : url([[font:fontname]]) format('truetype');
}
Er, what do you mean by "in your css" ? where is that? in one of the theme's *.CSS files? in HTML code when you edit a text? Something/where else?
Joseph
EDIT.- Sam, I've taken all of the steps you describe but am stuck as to how and where I can actually display text in the font I specified.
you would use that in the theme's css files.
Then you would need to add that font's name to a css attribute.
@font-face {
font-family: Junction;
src: url(/moodle2/theme/arialD/pix/Junction_02.ttf) format("truetype");
}
h2 {
Junction, Georgia, serif;
}
Then you would need to add that font's name to a css attribute.
@font-face {
font-family: Junction;
src: url(/moodle2/theme/arialD/pix/Junction_02.ttf) format("truetype");
}
h2 {
Junction, Georgia, serif;
}
Thanks John, but I meant to follow Sam's scenario and was wondering where to put those lines:
@font-face {
src : url([[font:fontname]]) format('truetype');
}
Joseph
@font-face {
src : url([[font:fontname]]) format('truetype');
}
Joseph
Hi Joseph,
You put the @font code as you have it above, with your specific font named, in your CSS file...
for example - in standard theme it would go in style_font.css
Then wherever you want that font to be used you must also declare this in the css too in the normal way.
for example...
#header h1, #header-home h1 { font-family: yourfancyfontname; font-size: 2em; font-weight: bold; }
Hope this helps clear the mist?
Mary
You put the @font code as you have it above, with your specific font named, in your CSS file...
for example - in standard theme it would go in style_font.css
Then wherever you want that font to be used you must also declare this in the css too in the normal way.
for example...
#header h1, #header-home h1 { font-family: yourfancyfontname; font-size: 2em; font-weight: bold; }
Hope this helps clear the mist?
Mary
Thanks to all who helped. I finally managed to understand the correct usage of the @font-face rule.
I only notice a very brief "overlapping moment" between the "normal" font and my @font-face font.
And of course it will only work in Firefox, not in MSIE (but who cares? 
).
Now I have a further question...
In 1.9's admin/HTML settings it is possible to select the fonts that should appear in the editor's drop-down list. I can't find that setting in 2.0's TinyMCE HTML editor settings. In fact, there are almost no settings available, as compared to 1.9.
Any ideas?
To answer my own 'further question'... strangely it seems that the list of fonts available to the TinyMCE HTML editor are hard-coded in lib/editor/tinymce/lib.php.
I managed to get my @font-face new font (called chopin.ttf) there by simply adding it to the end of line 125:
'theme_advanced_fonts' => "Trebuchet01=Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;Wingdings=wingdings;Chopin=chopin",
Hm, there must be an easier way.Please note, however, that text formatted that way will not show up with the new font in the HTML wysiwyg view, only when displayed in the course (see attached shot).
Joseph
UPDATE: since Moodle 2.4, we can add fonts to TinyMCE directly from the Admin menu (block)
Actually, IE does support this, they just go about it in their own way.
For it to work in IE7, you need the same ttf font in .eot format. Then your css would like:
@font-face {
font-family: 'DeliciousRoman';
src: url('/moodle2/theme/arialD/pix/delicious_roman-webfont.eot');
src: local('âº'), url('/moodle2/theme/arialD/pix/delicious_roman-webfont.woff') format('woff'), url('/moodle2/theme/arialD/pix/delicious_roman-webfont.ttf') format('truetype');
}
The above will work across all major browsers including IE7...
You can convert fonts to the .eot format here (plus get other info):
http://www.fontsquirrel.com/fontface/generator
Of course to properly use it in the theme, we would probably then need another function for the IE only font.
For it to work in IE7, you need the same ttf font in .eot format. Then your css would like:
@font-face {
font-family: 'DeliciousRoman';
src: url('/moodle2/theme/arialD/pix/delicious_roman-webfont.eot');
src: local('âº'), url('/moodle2/theme/arialD/pix/delicious_roman-webfont.woff') format('woff'), url('/moodle2/theme/arialD/pix/delicious_roman-webfont.ttf') format('truetype');
}
The above will work across all major browsers including IE7...
You can convert fonts to the .eot format here (plus get other info):
http://www.fontsquirrel.com/fontface/generator
Of course to properly use it in the theme, we would probably then need another function for the IE only font.
Thanks for the info, John, but seriously I feel less and less inclined to bother about MSIE.
Thanks Sam for your input to this thread. I'm going to see if I can get this to work over the weekend.
Thanks again!
Mary
Thanks again!
Mary