Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

font not being displayed as css style, but instead obeying the browser

Displayed Font is exclusively showing the browser setting



12:53 pm on Nov 11, 2005 (gmt 0)

At first I thought it was an issue of nested divs, but even the parent divs aren't displaying the correct font style. I've never changed the display settings on my browsers so why all of a sudden are my pages adhering to the browser and not my css?

Note: the font displays correctly in Dreamweaver design mode.


1:06 pm on Nov 11, 2005 (gmt 0)

10+ Year Member

Can you provide a simplified example of your problem?


2:08 pm on Nov 11, 2005 (gmt 0)

Hmmm. The style sheet has several sections, none of which are displaying the coded font:Arial, Helvetica, sans-serif . Instead I get a times... display. Well, actually, now I've got Firefox showing proper font, but still not IE.

I'm struggling to think of another way to explain problem so I'll resort to showing my embarrassing efforts at css coding.

It starts like this...

#masthead {

width: auto;
height: 50px;
background-image: url(file:///C¦/Documents%20and%20Settings/Owner/My%20Documents/RIDCAN/e-RIDCAN_site/images/longyel.gif);
background-position: left;
background-repeat: no-repeat;
text-align: right;
padding-bottom: 1px solid #006699;
font:Arial, Helvetica, sans-serif;
font-size: 0!important;
margin: 0px 10px 0px 10px

I don't think I need to specify fonts for all of the divs since I want everything to be the same font. But I've went back and added the font specification in every single div just to try to resolve problem. Still I'm getting Times serif.

Here's more of the code.

#contentbgd {
font: Arial, Helvetica, sans-serif;
width: auto;
height: inherit;
margin: 0px 10px 0px 10px;
padding: 20px;

/***** inside left nav *****/
#left {
float: left;
width: 200px;
height: auto;
margin: 0px;
background-color: #FDF4D0;
padding: 10px;
font: Arial, Helvetica, sans-serif

font: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #FFF;
padding: 10px;

I admit that I haven't even begun to understand this stuff, and for my audience I'm not worrying about older or lesser-used browsers. But still am open to your advice on any issues.


2:20 pm on Nov 11, 2005 (gmt 0)

10+ Year Member

If you want to specify a font for the entire document, then this is what you need.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;


3:00 pm on Nov 11, 2005 (gmt 0)

Re: Font for specific divs

Shouldn't I still be able to set varying fonts for different divs and also use the different classes to set styles for different sections, headings, etc.?

This is how dumb I am -- Is that not within my control? The view is established by the user's browser settings?


4:04 pm on Nov 11, 2005 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Yes, you can. But in your case, you're defining them all to use the same fonts, so to be more efficient, set that as the font for your body instead of defining it individually a bazillion times. You can still override that for each section if you need to change it for one.

Also, you're using font: to define your font family. Try explicitly using font-family instead, since you don't seem to be specifying any other font settings. I don't know if that has anything to do with your problem, but give it a try.


4:35 pm on Nov 11, 2005 (gmt 0)

Ah. Nice tip. Thanks.

I guess I'll stay with single font-family here. But in my pre-css sites, I always used serif font with non-serif paragraphs. I worry that I'll want to do that again in future and I can't figure out why I can't do that or do different fonts for different sections. I've searched this discussion board and others and googled, but haven't seen advice on this topic. Perhaps mixed fonts just aren't done except thru graphics?

Anyway, you've been very tolerant.




7:25 pm on Nov 11, 2005 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

You certainly can do mixed fonts. I think you misunderstood my meaning.

Suppose you define your overall fonts to be arial:

body { font-family: arial,sans-serif; }

Next, suppose you want the text in a particular area to display serif fonts instead. You simply add another style rule for that area. For example, suppose I have the following HTML:

<div id="header">...</div>
<div id="content">...</div>

Now, suppose I decide that I want the content to contain serif fonts. Just do this:

body { font-family: arial,sans-serif; }
#content { font-family: serif; }

In your case, though, it looks like you're using the same font throughout the site, so there's no need to include that information over and over if you just define it up at the top level.


Featured Threads

Hot Threads This Week

Hot Threads This Month