@font-face font isn't rendered when I go to my site from another page
I use an @font-face rule in my css:
@font-face {
font-family: "GeoSansLight";
src: url('GeosansLight.eot');
src: local('GeosansLight'),
url("GeosansLight.ttf") format('truetype');
}
This works perfect in IE and Firefox when I just enter the site URL in my browser window. However, if I get on my site through a link from another site the @font-face doesn't work. If I then click on one of my navigation links the proper font is displayed. For once, this problem is not an issue in IE, only in Firefox.
URL of affected sites
Alle antwoorden (5)
From https://bugzilla.mozilla.org/show_bug.cgi?id=555077
Firefox uses the document principal, not the stylesheet one, so if a link to a page has www. in it (but the base url of that page has no www. prefix) and your stylesheet exists at an address without the www. prefix, then the stylesheet will load but no url like a font-face one in that stylesheet will load because it doesn't match the www. if the server fails to redirect to the version of the page without www.
So the way the server handles links with the www. prefix is triggering a same-origin security measure. This can be fixed on the server end by redirecting the www. links to non www. ones as that page code has base href="http://neglectdesign.be/" in it.
Another solution would be to encode the font into a data: URI but the bug comments say that workaround shouldn't be allowed in future.
Thanks for the reply, but as far as I can tell my syntax is identical to the one mentioned in your first link. And the second link, I assume you noticed that this is just me posting the same problem on another site right? I've been working on this for quite a while so i'm desperate for a solution. A slight indication perhaps: there seems to be a difference when i link to neglectdesign.be and when i link to www.neglectdesign.be but I can't get my head around that yet.
Funny you mention that, i just thought the same thing and it worked. Thanks a lot, it was your post that put me on it!