homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

font not being displayed as css style, but instead obeying the browser
Displayed Font is exclusively showing the browser setting

10+ Year Member

Msg#: 7895 posted 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.



10+ Year Member

Msg#: 7895 posted 1:06 pm on Nov 11, 2005 (gmt 0)

Can you provide a simplified example of your problem?


10+ Year Member

Msg#: 7895 posted 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.


10+ Year Member

Msg#: 7895 posted 2:20 pm on Nov 11, 2005 (gmt 0)

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;


10+ Year Member

Msg#: 7895 posted 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?


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 7895 posted 4:04 pm on Nov 11, 2005 (gmt 0)

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.


10+ Year Member

Msg#: 7895 posted 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.




WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 7895 posted 7:25 pm on Nov 11, 2005 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved