Question

@font-face {
    font-family: 'CodeLight';
    src: url("font/CODE_Light.eot"); /* IE9 Compat Modes */
    src: url("font/CODE_Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("font/CODE_Light.woff") format("woff"), /* Modern Browsers */
         url("font/CODE_Light.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("font/CODE_Light.svg#svgFontName") format("svg"); /* Legacy iOS */
    }

I am trying to load above fonts using @font face, but it gives 404 when I checked it in chrome developer tools. Can anyone explain what is wrong with this.

Answer 1

If it gives you 404, you’ve specified a bad url for your fonts…

If you have a directory structure like this:

~
    css
           style.css
    fonts
           font1.eot
           font2.ttf

Than you obviously have to set it like this:

src: url('../fonts/font1.eot")