IE8 And Chrome vs. Firefox Font Squirrel

HTML & CSS
21

For clarification . . . my css

@font-face {	font-family: 'tangerine';
			src: url('fonts/Tangerine_Regular-webfont.eot');  /* IE9 Compat Modes */
			src: local("☺"),;
 			src: url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
		        url('fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
 		        url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
		        url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg'); /* Legacy iOS */
			font-weight: normal;
    			font-style: normal;
			font-variant:normal;
}

Thanks I really appreciate your time.

rick

22

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

Hmm… the path is right, the font file doesn’t seem corrupt, and I haven’t a clue why FF doesn’t find your file.

Edit: I just reloaded your page and, for a split second, the Tangerine font displayed. Hmm…

23

I’ll check my FF program again . . . . .

Not rendering here . . . wait . . . need to check this FF version as it’s different than the home computer . . . PROBLEM - this is FF 3.5. Let me upgrade and try it again . . .

Sheesh . . .

Rick

24

Rick, remove the @font-face rule you have in your stylesheet and replace it with this:

@font-face {
    font-family: 'tangerine';
    src: url('css/fonts/Tangerine_Regular-webfont.eot');
    src: url('css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

I just tested this on your site and it worked.

25

Uh Oh . . gotta go.

I’ll upload the updated style sheet and test it.

I’ll let you know.

thanks much . . . rick

26

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.

27

@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?

28

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

There’s no Javascript involved.

29

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'),
30

Rats - it didn’t work.

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

Thanks . . . rick

31

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

32

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

33

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.

34

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.

35

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. :confused:

36

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

37

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

38

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

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

40

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