Hi,
I'm having an issue with @font-face in css. More specifically, I seems I can use a remote url to load the embeddable font.
Here's my code:
HTML Code:
* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
font-family: 'MuseoSlab500';
src: url('http://myremoteserver.com/museo_slab-webfont.eot');
src: local('☺'),
url('http://myremoteserver.com/museo_slab-webfont.woff') format('woff'),
url('http://myremoteserver.com/museo_slab-webfont.ttf') format('truetype'),
url('http://myremoteserver.com/museo_slab-webfont.svg#webfont') format('svg');
}
This does not work, however I am able to load the font if it is stored on the same server as my page. But, I am using BigCartel (shopping cart) which is a hosted service, and I can't upload anything except product images. So, I have to use a 3rd party server to load in all css images, etc.
Does anyone have an idea why using a remote url doesn't work? And is there anyway to get around this?
This has been a huge pain, and any help would be MUCH appreciated!
Thanks!
In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
Last edited by Fang; 05-10-2010 at 12:48 AM.
At least 98% of internet users' DNA is identical to that of chimpanzees
Thanks Fang.
I figured that out too. The only solution I found is to use fontsquirrel and use base64 encode to embed the font directly into my css file. This works in Gecko and Webkit, and IE doesn't seem to care if the font is on another domain.
Thanks!
Bookmarks