Search code examples
cssapache.htaccessfont-facewebfonts

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

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

Solution

  • 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>