CSS @font-face doesnt work

Question

I've been looking everywhere but I still couldn't find an answer. Google Chrome does not recognize the font. Here is part of my code, hope it will help you tell me where I'm wrong.

@font-face {
font-family: 'N';
src: url('../fontawesome-webfont.eot'); /* IE9 Compat Modes */
src: url('../fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
   url('../f.woff') format('woff'), 
   url('../fontawesome-webfont.ttf')  format('truetype'),
   url('../fontawesome-webfont.svg#svgFontName') format('svg');
   }

.btn {
  font-family: 'N';
 display: inline-block;
  padding: 6px 12px;
 etc....

The files are in the right folder.

Check your web inspector console for errors. What does it say? — Ben Rondeau, Aug 04 '15 at 21:33
upload your site on web server then check it out. If still not working then give online link with `HTTP`. — MHK, Aug 04 '15 at 21:36
The woff format which Google Chrome uses has different file name f.woff, are you sure this is the file name? — Ahmad Alfy, Aug 04 '15 at 23:52

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

put the font files side of your pages in same level for check mapping and be sure the path is correct.

if you are using a web server (IIS etc..) you may need add the MIME type in your config file: Add MIME mapping in web.config for IIS Express

edited May 23 '17 at 12:29

Community

1
1

answered Aug 04 '15 at 22:13

Hamed

61
7

CSS @font-face doesnt work

1 Answers1