in HTML vs font: in CSS...problem - HTML Forums

jpfalet · 06-29-2009, 10:51 PM

Hello,

When I try to set a font in HTML it works, but if I set a rule in my CSS to set the same font, it doesn't. Here are the three things I do (not at the same time of course):


...
...
...


vs

body {
font-family: Verdana, Tahoma, Arial, Helvetica;
}

or even...

body {
font: Verdana, Tahoma, Arial, Helvetica;
}

Out of all of those, only the first can change the font in my browser...is this a CSS issue because, somehow, the browser has superiority over CSS, and HTML has superiority over the browser?

I would appreciate input.
Thanks.

coothead · 06-30-2009, 12:36 AM

Hi there jpfalet,

and a warm welcome to these forums.

The font element is deprecated and should no be used.

CSS will override the font element as this example shows...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body, font {
    font-family:'times new roman',serif;
    font-size:36px;
    color:#000;
 }
</style>

</head>
<body>

<font face="Verdana, Tahoma, Arial, Helvetica,sans-serif" size="1" color="#f00">
<div>
CSS RULES OK
</div>
</font>

</body>
</html>

Further reading:-

jpfalet · 06-30-2009, 01:15 PM

Therefore, I should use the CSS over the HTML to change the font?
Or do I have to use the HTML to change it...I didn't quite get your answer.

But if you are saying that I should use the CSS, then why isn't it working as I explained?

silent viper · 06-30-2009, 01:52 PM

You should try to use CSS to change the font whenever you can.

If you would copy and paste us the exact code that you are having issues with then we might be able to help you.

jpfalet · 06-30-2009, 05:26 PM

I gave you my problem...I type this in my main.css:

body {
background: url(../_images/backTeal.gif);
text-align: center;
font: Verdana,Tahoma,Arial,Helvetica;
}

or

body {
background: url(../_images/backTeal.gif);
text-align: center;
font-family: Verdana,Tahoma,Arial,Helvetica;
}

and it doesn't work. The font does not change.

Whereas if I do it in the HTML, like this:


...


then it works...
There's nothing else to it. It's plain simple. Why doesn't the CSS work?

silent viper · 06-30-2009, 05:40 PM

Quote:

Originally Posted by jpfalet

I gave you my problem...I type this in my main.css:

body {
background: url(../_images/backTeal.gif);
text-align: center;
font: Verdana,Tahoma,Arial,Helvetica;
}

or

body {
background: url(../_images/backTeal.gif);
text-align: center;
font-family: Verdana,Tahoma,Arial,Helvetica;
}

and it doesn't work. The font does not change.

Whereas if I do it in the HTML, like this:


...


then it works...
There's nothing else to it. It's plain simple. Why doesn't the CSS work?

I presume you are linking to a stylesheet instead of placing the CSS directly into the webpage?

Have you linked the stylesheet correctly?

jpfalet · 06-30-2009, 09:35 PM

Yes, it is linked perfectly fine. All my other rules work, except for the font one in the body.

Horus_Kol · 06-30-2009, 11:54 PM

can you show us the whole HTML and CSS? there may be another rule somewhere interfering.

jpfalet · 07-03-2009, 02:33 PM

Wow, that would be too long, but let me tell you that:

1) there is nothing in my HTML which is using the tag
2) and the only rules in my CSS which directly modify the formatting of the actual text are:

color:
font-size:
text-align:

Hope it helps...

jpfalet · 07-03-2009, 02:42 PM

Ok, I think I might have solved my problem.

By using:

font: Verdana,Tahoma,Arial,Helvetica;

it didn't work...but I did not realize that by doing:

font-family: Verdana,Tahoma,Arial,Helvetica;

...it did work...

so does that mean that you MUST use the "font" for single font faces and "font-family" for multiple ones like in my example?

coothead · 07-03-2009, 02:46 PM

Hi there jpfalet,

without a link to your site or the full page code, starting at the DOCTYPE and
ending at the </html>, I am afraid that there is no way that we can help you.

silent viper · 07-03-2009, 02:58 PM

Quote:

Originally Posted by jpfalet

Ok, I think I might have solved my problem.

By using:

font: Verdana,Tahoma,Arial,Helvetica;

it didn't work...but I did not realize that by doing:

font-family: Verdana,Tahoma,Arial,Helvetica;

...it did work...

so does that mean that you MUST use the "font" for single font faces and "font-family" for multiple ones like in my example?

font-family is for the font type and if you use the font: one then you must place in things like font size, font colour etc for example

font: Verdana 12px black;

At least I think thats how it works.

jpfalet · 07-03-2009, 07:00 PM

Quote:

Originally Posted by silent viper

font-family is for the font type and if you use the font: one then you must place in things like font size, font colour etc for example

font: Verdana 12px black;

At least I think thats how it works.

Thanks, I think that answers my question.

Pegasus · 07-03-2009, 07:51 PM

Don't use commas when you're listing font families. That could be what was buggering up the code. You can use multiple families when you're using the short form font: info; I do it all the time. You just have to have it in the correct order. I believe you have it correct, jp - family, size then colour.