从外部网址向我的网站添加adidng字体无法正常工作

Question

@font-face {
  font-family: 'Oswald';
                src: url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.eot');
                src: url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.eot?#iefix') format('embedded-opentype'),
                         url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.woff') format('woff'),
                         url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.ttf') format('truetype'),
                         url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.svg#oswaldregularwebfont') format('svg');
                font-weight: normal;
                font-style: normal;

}

Note** : I am doing this on amazon webstore i have also tried this on local html file but this does the same thing... not working am i doing something wrong..

Thanks

Answer 1

Attempt 1: Standard practice is to always use http:// in the url. Fix that in your code and try again.

Attempt 2: I think you are making a cross domain request to the font which is intentionally blocked by many servers as a measure of protection against someone just linking to the fonts, effectively stealing the server bandwidth and possibly violating the font's EULA.

So if you have access to the server where the fonts are stored, you can edit the configuration file to allow cross domain requests for fonts, if you have already measured the risks!

Attempt 3: Some people have reported that serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. Refer this question !

So you will have to host the fonts on servers that support cross domain access for webfonts.

Answer 2

This font-face works just fine: http://jsfiddle.net/xBmTG/

@font-face {   
    font-family: 'Oswald';                 
    src:    url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.eot');                 
    src:    url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.eot?#iefix') format('embedded-opentype'), 
            url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.woff') format('woff'), 
            url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.ttf') format('truetype'), 
            url('http://www.dev.icyberking.com/fonts/oswaldregularwebfont.svg#oswaldregularwebfont') format('svg');
    font-weight: normal;
    font-style: normal;  
}


body
{
    font-family: Oswald, sans-serif;
}

I assume the problem lies in your selectors in the rest of your CSS file.