CODEWITHSUNDEEP
cssfont-face
brianrhea
brianrhea

Reputation: 3724

@font-face displays only when www. not in address. Domain name only, displays correctly

I have a client site on a Wordpress implementation and in Firefox 4 on my PC, the @font-face renders just fine when www. is left out of the address. However, if you visit the full URL, it no longer works.

I'm stumped. Any thoughts?

Upvotes: 3

Views: 2827

Answers (2)

rjb
rjb

Reputation: 9116

One way around the same-origin font policy is to use relative links (../fonts/font-name.ttf) or absolute links (/fonts/font-name.ttf) to your font files instead of putting the FQDN (Fully Qualified Domain Name) in the @font-face src path (http://www.example.com/fonts/font-name.ttf).

However, even if you're using flexible file paths to your font files from your stylesheets, if you're serving the CSS form a different domain (or sub-domain) than where it's being requested you'll still be faced with the same origin policy.

Since WordPress theme URLs are generated using the full domain name in the path, this by itself is much of your problem.

For example, if you're viewing this page:

http://example.com/about

and the fonts are being served via CSS from:

http://www.example.com/css/screen.css

You'll encounter the same origin policy (since the fonts specified in the CSS are being served from a different domain. Remember, sub-domains such as "www" are technically considered a separate domain).

One way around this problem is to configure Apache to forward all incoming URLs to the domain name that matches your WordPress Site Address.

example.com -> www.example.com (or vice versa)

Doing this will ensure all images, stylesheets and fonts are served from the same domain, thus circumventing your problem(s).

Upvotes: 0

andyb
andyb

Reputation: 43823

It sounds like you are hitting the Firefox default font policy.

Firefox does not allow cross-domain fonts by default (even with sub-domains). See the following questions for some excellent help in this area:

@font-face fonts only work on their own domain

How to add an Access-Control-Allow-Origin header

Upvotes: 4

Related Questions