font-family not loading?

Question

I have the following CSS declaration:

body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

It isn't loading on the page. I'm having to add:

    <style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>

To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?

Note that all other CSS is working correctly...

Answer 1

have you tried to select following?

body, body * {
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */

/* OR just */
* {
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */

here is what you can do with CSS3: http://www.css3.info/preview/web-fonts-with-font-face/

Answer 2

So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:

body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}

But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.