@font-face in Firefox

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?

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?

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.

What font formats are you serving? All the browsers like different font file types. I use [url=http://www.fontsquirrel.com/fontface/generator]Fontsquirrel[/url] 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 [url=http://onlinefontconverter.com/]font convertor[/url] 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.

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;
}

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: [code] @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; } [/code] 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) [code] h2 { font-family: 'TeXGyreAdventorBold', Arial, Helvetica, sans-serif; font-weight: bold; } [/code]

Thanks guys, I also used FontSquirell but got different code to you, Tom. Here's what it gave me (doesn't work in FF).

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.

Thanks guys, I also used FontSquirell but got different code to you, Tom. Here's what it gave me (doesn't work in FF). [codeblock]@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; }[/codeblock] 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.

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;
}

Try putting all the font files into a files directory in the theme. Then change the CSS to this: [code] @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; } [/code]

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?

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?

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.

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.

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

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

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.

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.