@font-face in Firefox

@font-face in Firefox, a forum discussion on Jojo CMS. Join us for more discussions on @font-face in Firefox on our Themes Support forum.

Back to Forum Index : Back to Themes Support   RSS
Rick Rick

11 Jul 2012
Posts: 336

Has anyone has luck using @font-face in Jojo with Firefox?

I'm using Jaijaz's Bootstrap branch with CSSTidy so the rules are fine.

Firefox appears to be picky about using relative paths and Jojo won't serve the font files out of the CSS directory.

I've also tried serving a fonts.css and the font files from external/fonts and Firefox still doesn't show them. Can anyone help?
Jaijaz Jaijaz

11 Jul 2012
Posts: 215

What font formats are you serving? All the browsers like different font file types. I use Fontsquirrel to generate the fontface kit. It will include all the necessary file types right back to IE6 and the right CSS to make it all work. Occasionally you will get a font that is protected and won't be converted using Fontsquirrel. I use this font convertor for the converting and then just use squirrel's css as the template.

I tend to serve the font files out of the files directory like we used to for flash stuff as it doesn't get touched by any preprocessing.

CCSTidy will strip multiple @font-face rules as it see them as duplicates. If more than one needed then I tend to put them in the customhead file. Actually helps with font render speed too but at the expensive of images etc.

Hope that helps.
If you not living on the edge you taking up too much space.
tom

Developer

tom

11 Jul 2012
Posts: 379

I've had issues in Firefox using fontsquirrel's format on a couple of occasions - although they keep updating it so I'm not sure that applies to the current version

one was to do with the weird character they use to force the font-face rather than a local version (which I'm not sure I agree with in any case) but i think they fixed it in the later versions

the other is really stupid but consistently causes issues - remove the linebreaks between the various url links in the second src declaration so it's all on one line eg:

@font-face {
font-family: 'TeXGyreAdventorBold';
src: url('../external/texgyreadventor-bold-webfont.eot');
src: local('�?�¢�??�?�º'), url('../external/texgyreadventor-bold-webfont.woff') format('woff'), url('../external/texgyreadventor-bold-webfont.ttf') format('truetype'), url('../external/texgyreadventor-bold-webfont.svg#webfontTc3iYEdw') format('svg');
font-weight: bold;
font-style: normal;
}


I've also found that, contrary to the fontsquirrel recommendation, if you have a style that you are declaring bold that uses a bold fontface family member, and the fontface style is not also set to font-weight: bold; it will double-bold it in some browsers (can't remember if its webkit or ff)

h2 {
font-family: 'TeXGyreAdventorBold', Arial, Helvetica, sans-serif;
font-weight: bold;
}
Rick Rick

11 Jul 2012
Posts: 336

Thanks guys, I also used FontSquirell but got different code to you, Tom. Here's what it gave me (doesn't work in FF).
@font-face{
font-family:'HandOfSeanRegular';
src:url(handsean-webfont.eot);
src:url(handsean-webfont.eot?#iefix) format(embedded-opentype),
url(handsean-webfont.woff) format(woff),
url(handsean-webfont.ttf) format(truetype),
url(handsean-webfont.svg#HandOfSeanRegular) format("svg");
font-weight:normal;
font-style:normal;
}

This was served as /external/fonts.css with the fonts in the same directory since I had issues tried to serve from /fonts/ and wanted to rule out having "../" in the path from the main css file to externals.

I just tried with Tom's code and still haven't got it running in FF. Next step will be to try throwing it in customhead or try a different font.
Jaijaz Jaijaz

11 Jul 2012
Posts: 215

Try putting all the font files into a files directory in the theme. Then change the CSS to this:


@font-face{
font-family:'HandOfSeanRegular';
src:url(../files/handsean-webfont.eot);
src:url(../files/handsean-webfont.eot?#iefix) format(embedded-opentype),
url(../files/handsean-webfont.woff) format(woff),
url(../files/handsean-webfont.ttf) format(truetype),
url(../files/handsean-webfont.svg#HandOfSeanRegular) format("svg");
font-weight:normal;
font-style:normal;
}
If you not living on the edge you taking up too much space.
tom

Developer

tom

11 Jul 2012
Posts: 379

hmm. the local reference seems weird looking in what I posted - might be better without it. I put the font files straight into an external folder in the theme, put all of the srcs on one line and have had no issues.
Firefox is quite aggressive with caching font files - you don't have an old, bad version lurking somewhere ? Or locally?
Do you run Charles? - is the request going through and not returning the file, or is the request not being made?
Rick Rick

11 Jul 2012
Posts: 336

Thanks Jaijaz, I'll give it a shot. Tom, I've seen a few places use a UTF8 smiley face for the local path that would never match a font and therefor force the use of remote fonts do I figured that's what your code was doing.

Thanks for the help.
Rick Rick

11 Jul 2012
Posts: 336

Tom, I don't use Charles but saw that the font was being requested and returned in Firebug.
Rick Rick

11 Jul 2012
Posts: 336

I found it... for some reason Firefox won't load the font (for me) if there's no quotes around the format names. I tried FF13 on Linux and Windows 7.

There's an upstream fix in CSSTidy to fix this, I'm testing now then I'll update the bootstrap branch to pull the more recent version.
Back to Forum Index : Back to Themes Support   RSS
You must be logged in to post a reply



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