@fontface webkit

@fontface webkit, a forum discussion on Jojo CMS. Join us for more discussions on @fontface webkit on our General Discussion forum.

Back to Forum Index : Back to General Discussion   RSS
dannyc

4 Dec 2010
Posts: 3

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
dannyc

4 Dec 2010
Posts: 3

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...
Jaijaz Jaijaz

4 Dec 2010
Posts: 215

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.
If you not living on the edge you taking up too much space.
tom

Developer

tom

4 Dec 2010
Posts: 379

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/
Back to Forum Index : Back to General Discussion   RSS
You must be logged in to post a reply



You need to Register or Log In before posting on these forums.