@fontface webkit

Hi All, How is everyone?

For my first post, a quick question.

I am trying to implement fontface into jojo. In the template folder root I have a folder called fontface with the font files in, and I am calling it from the style.css as ../bienetresocial-webfont.eot etc..

It is not working.. Do I have to put the font files in a specific place to be able to call them from the css folder?

Kind Regards,

Danny

Hi All, How is everyone? For my first post, a quick question. I am trying to implement fontface into jojo. In the template folder root I have a folder called fontface with the font files in, and I am calling it from the style.css as ../bienetresocial-webfont.eot etc.. It is not working.. Do I have to put the font files in a specific place to be able to call them from the css folder? Kind Regards, Danny

Got it!

Put this in your style css file..

@font-face {
font-family: 'BienetresocialRegular';
src: url('../../jojocms/fontface/YOUR_FONT_HERE.eot');
src: local('?'), url('../../jojocms/fontface/YOUR_FONT_HERE.woff') format('woff'), url('../../jojocms/fontface/YOUR_FONT_HERE.ttf') format('truetype'), url('../../jojocms/fontface/YOUR_FONT_HERE.svg') format('svg');
font-weight: normal;
font-style: normal;
}

And obviously put a folder in your jojo cms folder called fontface with your font files in.

Hope this helps someone else...

Got it! Put this in your style css file.. @font-face { font-family: 'BienetresocialRegular'; src: url('../../jojocms/fontface/YOUR_FONT_HERE.eot'); src: local('?'), url('../../jojocms/fontface/YOUR_FONT_HERE.woff') format('woff'), url('../../jojocms/fontface/YOUR_FONT_HERE.ttf') format('truetype'), url('../../jojocms/fontface/YOUR_FONT_HERE.svg') format('svg'); font-weight: normal; font-style: normal; } And obviously put a folder in your jojo cms folder called fontface with your font files in. Hope this helps someone else...

Hey, I have several sites running font-face. Whenever you want to serve files that you don't want Jojo to interfere with put them in a "files" or "external" directory in your theme or plugin. So I have put all the various font files into the files dir and then in the style.css I call them simply "../files/font.eot" etc.

This works really well if you are only pushing one font. However if you are pushing more than one font it will strip all but one font-face rule thinking they are duplicate. In this situation I put the second or more rules in the customhead.tpl file.

Hope that helps.

Hey, I have several sites running font-face. Whenever you want to serve files that you don't want Jojo to interfere with put them in a "files" or "external" directory in your theme or plugin. So I have put all the various font files into the files dir and then in the style.css I call them simply "../files/font.eot" etc. This works really well if you are only pushing one font. However if you are pushing more than one font it will strip all but one font-face rule thinking they are duplicate. In this situation I put the second or more rules in the customhead.tpl file. Hope that helps.

Another solution for sites with more than one @font-face declaration is to modify Jojo's Stitcher class. (The current svn of Jojo branch 1.0 has this modification but you may not want to go there yet)

Stitcher does the compression/optimisation of all the style.css files into a single styles.css but, as a part of that process it looks for duplicate css and strips out all but the last one, which doesn't work for @font-face

in jojo/plugins/jojo_core/classes/Jojo/Stitcher.php
line 213
/* Check for a class already being declared */
change: if (isset($temp[$class])) {
to: if (isset($temp[$class]) && $class!='@font-face') {

I put the fonts an 'external' folder in the theme and call them from there in style.css

@font-face {
font-family: 'DroidSerifRegular';
src: url('../external/DroidSerif-Regular-webfont.eot');
src: local('?'), url('../external/DroidSerif-Regular-webfont.woff') format('woff'), url('../external/DroidSerif-Regular-webfont.ttf') format('truetype'), url('../external/DroidSerif-Regular-webfont.svg#webfontOAAhrq6s') format('svg');
font-weight: normal;
font-style: normal;
}

(just remember the url is relative, so if you do put the css inline in the template, the url will be /external/ rather than ../external/

Another solution for sites with more than one @font-face declaration is to modify Jojo's Stitcher class. (The current svn of Jojo branch 1.0 has this modification but you may not want to go there yet) Stitcher does the compression/optimisation of all the style.css files into a single styles.css but, as a part of that process it looks for duplicate css and strips out all but the last one, which doesn't work for @font-face in jojo/plugins/jojo_core/classes/Jojo/Stitcher.php line 213 /* Check for a class already being declared */ change: if (isset($temp[$class])) { to: if (isset($temp[$class]) && $class!='@font-face') { I put the fonts an 'external' folder in the theme and call them from there in style.css [code] @font-face { font-family: 'DroidSerifRegular'; src: url('../external/DroidSerif-Regular-webfont.eot'); src: local('?'), url('../external/DroidSerif-Regular-webfont.woff') format('woff'), url('../external/DroidSerif-Regular-webfont.ttf') format('truetype'), url('../external/DroidSerif-Regular-webfont.svg#webfontOAAhrq6s') format('svg'); font-weight: normal; font-style: normal; }[/code] (just remember the url is relative, so if you do put the css inline in the template, the url will be /external/ rather than ../external/