3

am using font-face to import my custom web font but the fonts are not loading into browsers it shows 404 file not found error in console but my fonts are in same directory and the names of the fonts are same as i mentioned in font-face

@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-reg-webfont.eot");
  src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

moreover i tried add these lines on .httaccess it does't works and i also surfed over SO no one have correct solution guys please help me.

AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .wof
  • have the the fonts been placed relative to the css file? – Pete Mar 25 '14 at 12:34
  • @Pete yea am having fonts on the same directory as i mentioned in css even it get downloaded when i type the full url but sometimes not –  Mar 25 '14 at 12:37
  • Look in your network tab in your browser and figure out what path it tries to load. Then fix your code. – h2ooooooo Mar 25 '14 at 12:50
  • @h2ooooooo it shows the correct path where i having the fonts –  Mar 25 '14 at 12:52
  • @Meow If you browse to the full path do *you* get a 404 error or does it start downloading the font? – h2ooooooo Mar 25 '14 at 12:55
  • Sometimes it gets downloaded but many times showing 404..! having same name in css and also the file name also correct path. –  Mar 25 '14 at 12:57
  • @Meow What do you mean sometimes? It should be consistent. Is it *always* `.woff` files that fail or will the **same** font get downloaded and then get a 404 2 seconds later? – h2ooooooo Mar 25 '14 at 13:04
  • @h2ooooooo it fails to download all time –  Mar 25 '14 at 13:06
  • @Meow But what do you mean sometimes? Is it *always* `.woff` or always all fonts or only `.ttf` or only `.eot` or only `.svg`? – h2ooooooo Mar 25 '14 at 13:14
  • @h2ooooooo it shows only for .woff and .ttf files not others. –  Mar 25 '14 at 13:17
  • Have you tried to add MIME type declarations in the webconfig, like this: http://stackoverflow.com/questions/24104736/networkerror-404-not-found-fontawesome-webfont-woffv-4-0-3/24278181?noredirect=1#comment42327167_24278181 – HowieH Nov 13 '14 at 09:54
  • 1
    Possible duplicate of [Why is @font-face throwing a 404 error on woff files?](http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files) – Silvestre Oct 13 '15 at 17:42

3 Answers3

1

Is your website running on a windows server? If so try to add the correct Mime types for the font extensions. This might be a duplicate of: Why is @font-face throwing a 404 error on woff files?

Btw, you have a typo in the last sentence of the "AddType" code block in your question. Its .woff (2 f's).

Community
  • 1
  • 1
markkes
  • 56
  • 2
0

Try this:

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

@font-face {
  font-family: 'Proxima Nova';
  src: url("./fontsproximanova-reg-webfont.eot");
  src: url("./fontsproximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-reg-webfont.woff") format("woff"), url("./fontsproximanova-reg-webfont.ttf") format("truetype"), url("./fontsproximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

The AddType directives are for getting the server to send the font files with the correct MIME type headers (so that the browser knows how to interpret them), and will not help with 404 errors. The 404 indicates to me that the urls in the CSS are incorrect.

Let me know if it works.

Chris Clower
  • 5,036
  • 2
  • 18
  • 29
0

I would just like to add, as this issue haunted me, Apache has an alias for /icons/ as part of /etc/httpd/conf.d/autoindex.conf

ZZ9
  • 2,177
  • 2
  • 27
  • 38