开发者

Web font hosted on another domain

开发者 https://www.devze.com 2023-02-12 02:08 出处:网络
I would like to know if it\'s possible to host webfonts on another domain, My CSS are hosted on Amazon CloudFront and my webfonts too but they don\'t show up, It was fine when my css were in local.

I would like to know if it's possible to host webfonts on another domain, My CSS are hosted on Amazon CloudFront and my webfonts too but they don't show up, It was fine when my css were in local.

this is my style.css on CloudFront:

@font-face {
    font-family: 'Aller';
    src: url('/app/files/fonts/allerdisplay-webfont.eot');
    src: local('☺'), url('/app/开发者_开发问答files/fonts/allerdisplay-webfont.woff') format('woff'), url('/app/files/fonts/allerdisplay-webfont.ttf') format('truetype'), url('/app/files/fonts/allerdisplay-webfont.svg#webfontLZ8nc4vC') format('svg');
    font-weight: 900;
    font-style: normal;
}

The stylesheet is hosted on CloudFront using a subdomain: static.mydomain.com/style.css And the Webfont can be downloaded from : static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf

Unfortunately when the stylesheet is called from mydomain.com it doesn't load it. I was wondering if it's a limitation or something like that.

Thanks


Should be no problem with an absolute path for the URL in the style declaration.

In your code above, you have relative path URLs.
You need an absolute path URL, like:

"http://static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf" (absolute)

-- not --

"/app/files/fonts/allerdisplay-webfont.ttf" (relative)

Theoretically, depending on the architecture of your subdomain, you might be able to rig up a way to maintain a relative URL, but this would not be worth the trouble. Just use an absolute one and be done with it.

[previous suggestions below were posted before the relevant code was posted] But Google Web Fonts achieves all this by moving the entire style sheet to the cloud. If you can't get it running inside the style sheet, you might try creating a separate style sheet like that instead.

Note, however, that to get true cross-browser compatibility, you need a bunch of different font file formats... this could be the problem. FontSquirrel has a font kit generator you may want to check out for that.

0

精彩评论

暂无评论...
验证码 换一张
取 消