IE8 And Chrome vs. Firefox Font Squirrel

HTML & CSS
1

Things finally looking better in IE8 and Chrome.

However, Font Squirrel Fonts not working at all in Firefox.

Any ideas ? ? ?

www.propertieswithstyle.com (not all pages complete yet)

Also, can someone check on how my two columns merge together or apart upon resizing in or out?

If I can get that corrected I’m almost home, correct?

Thanks . . . Rick

2

Firefox uses the WOFF format which you don’t have on your site.
http://www.propertieswithstyle.com/fonts/Tangerine_Regular-webfont.woff

You might also have a mistake in your @font-face declaration, this should work, as long as the fonts are there :wink:


@font-face {
	font-family: 'tangerine';  
	src: url('fonts/Tangerine_Regular-webfont.eot');
	src:
		url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
		url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
		url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg');
}
3

Also, can someone check on how my two columns merge together or apart upon resizing in or out?

It needs a lot of work. Most of the content is not accessible at all to me…

Step 1. Remove fixed positioning for your menu - it’s far too large.

4

Thanks Mark . . . I do have this in my html . . .

 url('fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */

Firefox has a problem with Font Squirrel fonts I believe.

5

Having that line in your HTML will not help if you don’t have the woff format font available. As ralph.m and others explained in your other thread, that format is missing from your site. If you don’t have a copy of it to upload, you’ll need to go back to Font Squirrel and redo it.

6

Font Squirrel says . . .

“IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.”

Does “same domain as the website” mean that the Font Squirrel fonts have to be on FF server? My FS fonts are on my GoDaddy server.

Their remedy is :

<FilesMatch "\\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\\.)?(domain1\\.org|domain\\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
Just swap out your calling domains for the one above

I wouldn’t know what, or where the “calling domains” are either.

It mentions the htaccess file. I have no clue about this.

see here: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

I’ve visited the code snippet on SitePoint before but did not obtain a clear answer.

The FS fonts work well in IE8 and Chrome 10.0.648.204.

Thanks . . . Rick

7

sorry - I meant my css page.

Rick

8

No. The domain is your website - propertieswithstyle.com - and the message means that the fonts have to be hosted somewhere within that site. All the other versions of the font - ttf, eot and svg - are on there, inside your “fonts” folder, but the woff version is missing.

You can ignore all of this. The only remedy you need is the one we keep telling you - get a copy of the font in woff format and upload it to the folder with the others. Firefox needs this font format, so the only way it’s going to work in Firefox is if you provide it. :slight_smile:

9

Does “same domain as the website” mean

It means the fonts must be on the same server as the html page that is calling them. Just store all the fonts on your server where the html page originates and you won’t have to jump through any htaccess hoops.

10

I must be missing something right in front of my face.

The woff font is in my font folder.

The attached are the contents of my font folder.

It appears that the woff font is there.

Thanks Rick

11

Is that what’s on your local machine or on your server? Maybe try uploading the fonts again, as that font is definitely not where it’s mean to be. This is the direct link to that woff file, and it returns a 404 error:

http://www.propertieswithstyle.com/css/fonts/Tangerine_Regular-webfont.woff

12

That’s interesting.

I have re downloaded the fonts twice before to be sure.

I’ve also uploaded them to my font folder on the server. I was very careful to be sure they were on the server.

When I’m at the office tomorrow I’ll double check.

Thanks Ralph

13

I have these fonts on the server and on my hard drive.

Please see the attached .png.

Where next? I have no clue . . .

Thanks

  Rick
14

The screenshot indicates that you last uploaded the font three weeks ago, so perhaps try and upload it again because, for whatever reason the file does not seem to be recognized.

15

OK - I’ll do that this afternoon and get back to you.

Thanks . . . Rick

16

Also, I’d not just overwrite the old file but delete the old file first and then upload the new file.

17

Ok . . . I deleted ALL Font Squirrel fonts from my computer and the server.

Using the @font-face kit I downloaded the fonts again.

Extracted them into my fonts folder.

Via FilZilla, I uploaded them again to my font folder on the server.

I uploaded the four Tangerine_Regular-webfont font files.

Waited some time then tested in FireFox. Fonts do not render. Yikes!

Where do I go from here?

Thanks . . . Rick

18

And this is 100% the same root where all other files are located? Can you create and upload a test.txt file to the same /css/fonts folder(so that you have a file in /css/fonts/test.txt) to test if new files are uploaded correctly? If they are, we should be able to call the test.txt page and it should not show a 404 error.

19

How kewl! I never thought of that. It worked.

Here http://www.propertieswithstyle.com/css/fonts/testtext.txt

The result was correct as follows . . .

This is a TEST TEXT file placed in my font folder on the server.

Next . . . .

20

Great! But that also tells us that if the .woff file is in that directory, then something else is completely wrong.

I’m going to download the tangerine files from fontsquirrel and try them on my own server and see if I run into the same issues as you are.