font face not work online

Question

My HTML is in local system and pointing to css

<link rel="stylesheet" href="http://nagasystems.in/tamil/stylesheet/common.css" type="text/css" charset="utf-8" />

My font path folder is

http://nagasystems.in/tamil/stylesheet/

i have following fonts in it

bamini-webfont.eot
bamini-webfont.svg
bamini-webfont.ttf
bamini-webfont.woff
bamini-webfont.woff2

Now if i load the local HTML in browser the font is not loading ... Tested in all browsers.. However if html , css and font are in online it works or if all three are in local it works ..

Check below the link for all three being in online that works

http://nagasystems.in/tamil/

Kindly help me please .. Breaking my heads out for solution ...

Update : Error in chrome console "Font from origin 'nagasystems.in'; has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access"

So, what we have is one link to a website that doesn't have the problem (it works), and the name of the font files. How are we supposed to find the error then? — GolezTrol, Sep 16 '14 at 09:45
@GolezTrol ., Kindly can you tell what more you need so that i can make it here .. Thanks 1) Link to stylesheet - http://nagasystems.in/tamil/stylesheet/common.css 2) Link to HTML - http://nagasystems.in/tamil/index.html 3) Path to Font - http://nagasystems.in/tamil/stylesheet/ — , Sep 16 '14 at 09:52
if font are not loading in your local PC then the problem lies within path — himanshu, Sep 16 '14 at 09:53
@himanshu Its simple , My font is working in same location of html file and not remote location — , Sep 16 '14 at 09:54
@serakiel "Font from origin 'http://nagasystems.in' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. " — , Sep 16 '14 at 09:57
@facebook-1093767019 There's your issue! All you need to do is download the fonts as well as the stylesheet and change the absolute path to a relative path pointing at your downloaded assets. For example: http://nagasystems.in/tamil/stylesheet/ to /tamil/stylesheet/ — Hevlastka, Sep 16 '14 at 10:05
@serakiel but our requirement is we will have our style and font online and html team will work from offline so only — , Sep 16 '14 at 10:20
@facebook-1093767019 If you need to use the fonts from that server you'll have to ask you sysadmin to add 'Access-Control-Allow-Origin' to the headers sent by the server. Without that no browser will be able to pull the font in. The other way to do it is by downloading the fonts and including them locally as well as the external stylesheet, however if anyone decides to change the fonts you'd have to manually update yours on your website as well. Check [this answer](http://stackoverflow.com/questions/13400594/understanding-xmlhttprequest-over-cors-responsetext/13400954#13400954) for more info — Hevlastka, Sep 16 '14 at 10:31
@serakiel Can you tell me how to do it in server please ?!?! — , Sep 16 '14 at 11:12

score 0 · Accepted Answer · answered Sep 16 '14 at 11:10

0

Try Adding the following line to .htaccess file in the same folder of style sheet

Header set Access-Control-Allow-Origin "*"

It will allow the header from all locations (*)

answered Sep 16 '14 at 11:10

PHP Geany

62
1
9

font face not work online

1 Answers1