This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

@font-face font isn't rendered when I go to my site from another page

  • 5 replies
  • 8 have this problem
  • 10 views
  • Last reply by cor-el

more options

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

http://www.neglectdesign.be

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 == http://www.neglectdesign.be

All Replies (5)

more options
more options

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.

more options

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.

more options

What happens if you just remove the

base href="http://neglectdesign.be/"

line from the page code?

more options

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!