IE8 And Chrome vs. Firefox Font Squirrel

[Paul O'B]

Is it this comma before the trailing semi-colon that is upsetting firefox?

	src: local("☺"),;

The comma shouldn't be there as there are no more urls on that line and the next line starts with a src.

[TechnoBear]

It works on my test server: http:/lab.rockatee.com/tangerine.html

@kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?

[kohoutek]

@kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?

I forgot a trailing slash in the URL. It should be: http://lab.rockatee.com/tangerine.html

There's no Javascript involved.

[kohoutek]

I found the culprits. The first culprit is what Paul has already mentioned; The extra comma needs to go, like Paul said in post #26. The second issue is the path in your CSS. You need to add "css/" to your paths.

Instead of this:

url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

This:

url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

[R Schreiber]

Rats - it didn't work.

Not only that - the fonts stopped rendering in IE8 and Chrome.

Thanks . . . rick

[kohoutek]

Are you sure? I still see the same code on your site.

[R Schreiber]

Are you sure? I still see the same code on your site.

Adding the css/fonts disables the font rendering in ALL browsers.

Take a quick look as I'm going to make the correction back shortly.

Go to my homes page . . . www.propertieswithstyle.com (fonts not rendering)

click :find south county & beach homes - - - on this page (and all of the map pages) the fonts are rendering via my original css on the server.

Thanks . . . Rick

[TechnoBear]

I found the culprits... The second issue is the path in your CSS. You need to add "css/" to your paths.

Instead of this:

url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

This:

url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

Actually, I don't think that's right. The fonts directory is inside the css directory, so calling it from a stylesheet, the original filepath was OK.

Sorry about my earlier red-herring with JavaScript; I hadn't realised NoScript also blocks @font-face by default.

[kohoutek]

Actually, I don't think that's right. The fonts directory is inside the css directory, so calling it from a stylesheet, the original filepath was OK.

Sorry about my earlier red-herring with JavaScript; I hadn't realised NoScript also blocks @font-face by default.

I know, but it didn't work on his site. It doesn't make sense to me, but that's the only way the font displayed in Firebug when I tested it two or so hours ago. It only worked when I added the css dir to the path. Anyway, I added the code I posted above to Rick's live site via Firebug (I set it on the .ttf font) and it worked in Firefox, the fonts displayed. I'm out of ideas if Paul's solution and the fixing of paths don't resolve the issue.

[ralph.m]

The fonts are working for me in Firefox now. Perhaps it was removing the comma that did it. Strangely, though, the font urls still return a 404. Bizarre.

[kohoutek]

The fonts are working for me in Firefox now. Perhaps it was removing the comma that did it. Strangely, though, the font urls still return a 404. Bizarre.

Yes, the font is working for me in FF, Chrome and IE8. Rick, perhaps you just need to clear your cache?

[TechnoBear]

The fonts are working for me in Firefox now... Strangely, though, the font urls still return a 404. Bizarre.

Same here - although only the woff format gives a 404 (same as before). But it's working now in FF.

[Paul O'B]

After removing the comma Firefox is using the TTF font now I believe as the Woff font is not loading.

It says on the Font squirell site that IIS needs woff added to the mime type.

add WOFF to your list of MIME types (if you are serving via IIS.)

[kohoutek]

Off Topic:

Insomnia strikes again. Obviously, when you use the web developer tools in FF, fonts won't show while testing, just like bg images and the like with relative paths which is why it worked when I added css to the path. It's just the comma as Paul indicated that was causing the ruckus.

[R Schreiber]

In Firefox. My computer at home has FF Ver 9.01 or something similar.

The version in my lap top is the dreaded 3.5 something. That was probably the root of the problem.

Now I've noticed that my main content is all messed up again.

It seems that every time I fix something else goes haywire.

Thanks for ALL of your help today.

Rick

[ralph.m]

It look OK to me, Rick.

One side issue this problem has highlighted, though, is that your fallback font(s) should be as close as possible in size and nature to the @font-face font. If your @font-face font doesn't load, the fallback font is way larger than your @font-face font, and thus blows your design apart. I'm not sure what standard system fonts are most similar in size and/or appearance to tangerine, though. A bit of research needed there. Just some food for thought, anyhow.

[R Schreiber]

After removing the comma Firefox is using the TTF font now I believe as the Woff font is not loading.

It says on the Font squirell site that IIS needs woff added to the mime type.

thanks Paul - I have absolutely no clue on what that means.

mime . . . IIS . . .

mime is a puppet show, right?

IIS . . ?

When I checked at home last night the Tangerine fonts were loading in FF version 9+

However I now have a page that has lost its right and left column designs . . .

Whew . . . I'm going to work on that now.

Thanks . . . Rick