3

While loading webfont through @font-face, .woof and .ttf files throw NetworkError: 404 Not Found.

I have gone through all the related topics in stackoverflow but i can't find a solution.

Even i have added the following code in .htaccess and in apache - httpd.conf. But no use.

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

And we are following the Mo'Bulletproofer method as suggested by most of the topics in stackoverflow

Following is my css code,

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-light-webfont.woff') format('woff'),
         url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: 100;
    font-style: normal;

}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-lightitalic-webfont.eot');
    src: url('../fonts/proximanova-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-lightitalic-webfont.woff') format('woff'),
         url('../fonts/proximanova-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-lightitalic-webfont.svg#ProximaNovaLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;

}

Even the path we have specified in url is correct.

In stackoverflow most of the related topics are mainly providing solution for windows - IIS server not more for Apache.

Error throwing on console

"NetworkError: 404 Not Found - http://localhost:8888/test/assets/fonts/proximanova-light-webfont.woff"
proxim...nt.woff
"NetworkError: 404 Not Found - http://localhost:8888/test/assets/fonts/proximanova-reg-webfont.ttf"

We have the file on same directory as we mentioned on font-face

ORyan
  • 482
  • 3
  • 8
Dinesh Babu
  • 458
  • 4
  • 17
  • 1
    Facing same problem while using web font for `.woff` and `ttf` files. – Vivek Vikranth Mar 25 '14 at 06:10
  • Apparently the URLs are *not* correct, and we have much less information about the problem than you have. We only see relative URLs with no information about base URL. Try using your browser’s developer tools (Network tab) to see what actually happens at the HTTP level: what is the exact request sent? And what happens if you access the absolute URL used there directly in a browser? – Jukka K. Korpela Mar 25 '14 at 06:27
  • @JukkaK.Korpela thanks for your comment. Edited my question, just have a look at it. – Dinesh Babu Mar 25 '14 at 06:34
  • So what happens when you try to access the URLs (mentioned in the error messages) directly in a browser? If you get 404, as I expect, then the URLs are simply wrong. It could be a matter of case of letters in file names vs. URLs, for example. – Jukka K. Korpela Mar 25 '14 at 06:46
  • In `localhost` when we access the URLs directly it is getting `downloaded`. And while calling from css it's not throwing 404 error. But in our `development server`, if we access the URLs directly it's throwing a `forbidden error`. So i enabled `Header set Access-Control-Allow-Origin "*"` in `apache`. Still its not working. – Dinesh Babu Mar 25 '14 at 06:51

1 Answers1

1

You can use the following in your .htaccess file

 <FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
Jerald
  • 335
  • 1
  • 10