CODEWITHSUNDEEP
htmlfont-face
Ravi Soni
Ravi Soni

Reputation: 2250

Adidng font-face to my site from external url is not working

@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

Upvotes: 2

Views: 3486

Answers (2)

Pankaj Parashar
Pankaj Parashar

Reputation: 10232

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.

Upvotes: 2

Tieson T.
Tieson T.

Reputation: 21239

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.

Upvotes: 1

Related Questions