Search code examples
cssfontsfont-face

@font-face not working, fonts seems not to be loaded

I'm using the following css to port my own font(on my local machine):

@font-face {
font-family: 'byekan';
src: url('~/Content/fonts/BYekan.eot');
src: url('~/Content/fonts/BYekan.eot?#iefix') format('embedded-opentype'),
   url('~/Content/fonts/BYekan.woff') format('woff'),
   url('~/Content/fonts/BYekan.ttf')  format('truetype'), 
   url('~/Content/fonts/BYekan.svg#svgFontName') format('svg'); 
}
* {
    font-family: 'byekan';
}

but it doesn't work, one thing I noticed is that the fonts are not loaded in the resources tab. The elements got their font-family set to byekan but it seems the fonts are not loaded for some reason. any ideas?

EDIT: I've tried accessing the path using my browser and it gives the following http error:

HTTP Error 403.14 - Forbidden
Solution

  • The issue you are having is because you are using ~ to select your home directory.

    Try to upload the fonts somewhere else and reference to the files either with absolute URL path:

    url ('http://www.anywebsite.com/Content/fonts/BYekan.eot');

    or with relative path for example:

    url ('Content/fonts/BYekan.eot');

    In your case the issue it's because you cannot reach the directory containing the font files because CSS does not understand the symbol ~ for referencing your home directory.