external font does not work in Foundation.Zurb CSS

Question

i want to add external font "Droid Serif" and i put the fontface in the foundation.css file. here is the code

@font-face{ font-family: 'MyWebFont'; 
    src: url('../font/DroidSerif-Bold-webfont.eot'); 
    src: url('../font/droid-bold/DroidSerif-Bold-webfont.eot?iefix') format('eot'),
         url('../font/droid-bold/DroidSerif-Bold-webfont.woff') format('woff'), 
         url('../font/droid-bold/DroidSerif-Bold-webfont.ttf') format('truetype'), 
         url('../font/DroidSerif-Bold-webfont.svg#webfont') format('svg'); }

now, i call the name in body

body {
  background: #edebda;
  color: #222222;
  padding: 0;
  margin: 0;
  font-family: "MyWebFont","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

but it wont take the font ? why is it so? I 've checked the path of the file and i am sure its right. is there anything wrong with the way foundation works? i really need your help ppl !

Answer 1

I've done it with Zurb Foundation without problems. Your font-face code seems good to me...

Have you tried to apply these font properties to a single item (not to body)? For example, enclose them into a class name (.apply-font) and apply it to a div or a span. Does it works? If not, maybe there's a path problem to your font files. But you're sure that's not the problem...

If it works, it could be that your body definition goes before the body one created by zurb when it compiles the file _globals.scss, and the second one overrides the first. To test if that's the problem, you could use the !important declaration to your font-family. This is the way to say that it doesn't matter where it's declared, this is the one to use.