@font-face - strange request URL for CSS fonts

Question

This is a dumb problem to have, I'm assuming there's a simple fix. I'm using a web font in a Wordpress theme - the site I'm working on has two domains that can be used to access the same site.

In my CSS I have used the font-squirrel format to declare the fonts:

@font-face {
    font-family: 'Oswald';
    src: url('oswald-regular-webfont.eot');
    src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-regular-webfont.woff') format('woff'),
         url('oswald-regular-webfont.ttf') format('truetype'),
         url('oswald-regular-webfont.svg#Oswald') format('svg');
    font-weight: normal;
    font-style: normal;
}

This works fine when I go to one of the domains, but when I go to the site via the other domain the font fails to load because it's considered to be a "cross-site" request. Basically when I go to domain1.com the request looks like this: http://www.domain1.com/fonts/oswald-regular-webfont.ttf

But when I go to domain2.com the request STILL looks like that. Why? Since I'm using relative paths, shouldn't domain2.com be requesting: http://www.domain2.com/fonts/oswald-regular-webfont.ttf

Anyone know what I've screwed up here? Is Wordpress injecting full paths into the CSS somehow?

Note: It works in Chrome, but not in Firefox or IE10. Chrome has the same strange URL behaviour, the difference is just that Chrome allows the cross-site request.

That's a very interesting ready, and quite helpful - thanks mate, I'll be able to use that information. — Nick Coad

unknowndomain unknowndomain · Accepted Answer · 2013-11-28T02:03:30

This is likely happening because you are using get_stylesheet_directory_uri() or similar to get the path to the CSS file and then using that in a wp_enqueue_style() call.

When this renders to the browser the page will have a full path to the file in it, not a relative one, which means that the font files are relative to another site, and thus it is cross site.

@font-face - strange request URL for CSS fonts

1 Answers