Why won't these fonts load across servers?

 

I have a demo page on one server (a free web host) that loads fonts through Google Web Fonts as well as from a fonts folder on the same server. It loads the local fonts through a non-relative URL in the CSS. Both the Google Fonts and the local fonts work fine on that server.

However, when I try to load the page on another server (also a free web host for testing), the fonts do not load--they just show up as a 0KB request that completes without errors.

This is the requests from the demo on the first server: 在这里输入图像描述

and this is from the same page on another server: 在这里输入图像描述

Why is this happening?

EDIT: Just noticed these errors in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://iansan5653.host22.com/fonts/socicon-webfont.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

socicon-webfont.woff downloadable font: download failed (font-family: "Socicon" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://iansan5653.host22.com/fonts/socicon-webfont.woff

If this has to do with cross-domain requests, how come the Google Fonts load cross-domain? How do I work around this?

The "Same-origin policy" is blocking the request to load the fonts from your first server. You can read more about "Same-origin policy" here

You can fix this issue taking one of the following two approaches:

  • Simple approach would be to move the fonts from host22.com server to your second server (current server) ie atwebpages.com . Update your code to load from the same server. This will fix your issue.

  • The other approach would require the server at iansan5653.host22.com to output the following header:

    Access-Control-Allow-Origin: http://iansan5653.atwebpages.com

    Where iansan5653.atwebpages.com is your current server. This will allow your second server to request resources from your first server. You can check with your hosting provider about if and how you can enable such header output.

    • 链接地址: http://www.djcxy.com/p/93478.html

    上一篇: 在IE11的Windows 8上IE8兼容模式的一些Javascript错误

    下一篇: 为什么这些字体不会跨服务器加载？