The primary reason for this failure? You are still using a version Firefox older than 3.5. (My Version is 6.0.2) So upgrade already! If that isn’t it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)
If you are serving from Apache, you can add this to you .htaccess file to allow your site access to the fonts:
<FilesMatch “\.(ttf|otf|woff)$”>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
</FilesMatch> Or even better, since the above code will allow anyone to leach:
<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 ones above. Credit for this method goes to Brooke Elgie
My site (domain) is GoDaddy.
I don’t know what “calling domains” are. I don’t know where it’s referring to when it says “the ones above?”
Using FontSquirrel fonts is pretty simple, so it shouldn’t require all that messing around. It looks to me like you have the font files in the wrong place. According to your file paths, those font files should be located here:
But that link throws an error. So, the question is, what folder are these fonts stored in? (Make sure to tell us where this folder is in relation to the root folder—i.e. where the home page is.)
Basically the information that FontSquirrel returned to you is accurate, most apache servers by default will block unknown or extensions it feels is a threat to the server. Basically all you need to do is change
(domain1\\.org|domain\\.com)
to
(propertieswithstyle\\.com)
and once you have done that the @font-face kit should work fine.
Did you actually upload the FontSquirrel fonts to your server? Are they in your /fonts/ folder? Is your /fonts/ folder directly inside your main root/home folder? It seems like the fonts are not there.
The code you posted in your first post is meant to go in a special file called a .htaccess file. But before you crawl down that rabbit hole, I think you should check the more obvious things, as outlined in my questions in this post.
When you say your fonts folder is “under” your CSS folder, do you mean it’s in the same folder as the CSS folder, or inside the CSS folder? At the moment, your CSS links are telling the browser to find your font folder inside your CSS folder (but in a rather awkward way, as the links are saying “go up one folder, then come back into this folder, then find the fonts folder in here …”).
I get a 404 error for that file, too, but the other font formats (svg, ttf and oet) are in that directory. Maybe need to redo the woff format and try again? I’ve never used @font-face, so I’m guessing.
Then it goes on to list the four fonts types . . .
Property src doesn’t exist then list the .oet .woff .ttf .svg along with font-weight, font-style and font-variant doesn’t exist.
With my limited knowledge it appears that I’m not selecting my path to the fonts correctly.
Based on the folders image in my previous post, just how do I point to the font folder?
src: url(‘…css/fonts/Tangerine_Regular-webfont.eot’);
or
src: url(‘…/fonts/Tangerine_Regular-webfont.eot’);
or
src: url(‘…/css/fonts/Tangerine_Regular-webfont.eot’);
You aren’t really listening to what’s been said above. The font is not there. Upload it again, fix your file paths, and don’t ess with the code that Font Squirrel gave you.
See post #15. @ralph_m was asking whether or not your fonts folder is inside your css folder, and according to the screenshot you posted, it is. The path to the folder that you are using is more complex than it needs to be.
”),