12

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...

Mike Earley
  • 1,223
  • 4
  • 20
  • 47
  • is it possible to add a link to the website where it isn't working? – Bazzz Jan 17 '13 at 13:13
  • I right now it's on my local development environment. It's working in JSFiddle. http://jsfiddle.net/vFXZz/ – Mike Earley Jan 17 '13 at 13:27
  • Then you have to post more code, because the fault is not in your CSS... Try @JohnPeter's solution with `!important` and be sure that no other `!important`-CSS-line is overwriting your CSS described here. – algorhythm Jan 17 '13 at 13:29
  • Or create a JSFiddle where you have the same problem... – algorhythm Jan 17 '13 at 13:31

8 Answers8

9

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.

developer tools

Mike Earley
  • 1,223
  • 4
  • 20
  • 47
8

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/

algorhythm
  • 8,530
  • 3
  • 35
  • 47
  • I tried * but not body *, although it shouldn't be necessary...however--I just tried it now, and it did not work. Again, the jsFiddle link above shows the code, and it is actually working there. – Mike Earley Jan 17 '13 at 13:29
5

some font-families have to be enabled using `font-face, usually u do something like this 

@font-face {
    font-family: 'alex_brushregular';
    src: url('alexbrush-regular-otf-webfont.eot');
    src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
         url('alexbrush-regular-otf-webfont.woff') format('woff'),
         url('alexbrush-regular-otf-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body {

font-family: 'alex_brushregular', Arial, "sans-serif";

}
Zlatko Soleniq
  • 390
  • 2
  • 4
  • 14
2

This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.

Shiping
  • 1,203
  • 2
  • 11
  • 21
0

Just try with the following example :

@font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
@font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}


body { font-family: Arvo; }

(or)

body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }

I think this may help you to resolve your problem.

John Peter
  • 2,870
  • 3
  • 27
  • 46
  • I don't need the extra font-faces, nor do I have those font-faces currently...I'm curious as to why doing that would work? – Mike Earley Jan 17 '13 at 13:28
  • Refer the following locations to your clarification : http://caniuse.com/fontface and http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp also i have stated above one is example how to use the font-faces in css, not for your current css. you need to make use of it. – John Peter Jan 17 '13 at 13:33
  • I'm wondering if there's a misunderstanding, since the question has nothing to do with font-face, and I know how to implement font-face. I'm trying to utilize Verdana, I don't need to use font-face for that. – Mike Earley Jan 17 '13 at 16:10
0

Something like this can also happen if your browser is using a cached version of your CSS file.

A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.

djvg
  • 11,722
  • 5
  • 72
  • 103
0

In my experience I had issues because there was only text within buttons on the page I was testing.

Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.

body {
    font-family: <your family>;
}

button {
    font-family:inherit;
}
Matthew
  • 1
  • 1
0

It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..

Techdriod k
  • 1