Basic CSS question

[weirdbeardmt]

Hey

when using this:

.someclass {font-family: tahoma, verdana, arial, sans-serif};

Does the browser use the font in the order it is listed assuming it is on the computer?

I want people to use Tahoma as the font (I am getting a bit sick of Verdana) but it seems it always shows up as Verdana.

What is the correct way to use this tag?

[Aes]

Yes, it runs through it by order and displays the first font that is available (Generally).

So, using your code, if the user doesn't have tahoma on the computer, then the browser will display verdana, et cetera, et cetera.

Another thing you might want to check, however, is your browser preferences. Sometimes that can be the source of your problem.

[creole]

Browser preferences will only come into play if the webpage has not specified a font or unless the user has set their internal stylesheet to override any browser settings.

If you're getting Verdana, then it might mean that you don't have Tahoma.

[Aes]

Yup; exactly what creole said.

He's so smart, don't you think?

[weirdbeardmt]

I do have Tahoma. That's how I know I like it!

I'm pretty sure it is displaying correctly.

Just out of interest, how common is Tahoma? Is it a system bundled font?

[Aes]

It may be -- I don't know. I'll let someone else answer that.

However, I know this pretty much covers everying and I always use it in this order:

arial, helvetica, verdana, sans-serif

[creole]

Tahoma comes with IE in newer versions. Or Microsoft offers a "font package" download from their site that includes Tahoma.

[Adam P.]

did u say that you have Tahoma on your computer? But verdana is coming up?

Try this:

Go to Start > Settings > Control Panel

Open the "Fonts" folder. Scan through and find Tahoma. A lot of the time fonts might have something like "MT" at the end. Some programs won't show the MT because it isn't really that important. If you don't have "tahoma mt" in your stylesheet and the font name really is "tahoma mt", then it will go to the next font.

BTW, if the font name is "tahoma mt" make sure you use quotes around it in your stlyesheet. Anything that is more than one word should have quotes. Example:

.someclass {font-family: "tahoma mt", verdana, arial, sans-serif};

Hope I help

EDIT: just checked my fonts and it's only "tahoma". sorry, might be different on yours

[weirdbeardmt]

I have Tahoma. In fact I have it twice. And Tahoma Bold.

I'll try removing one of the Tahoma's.

I got about a million and one fonts bundled with corel 10. They all look the same but Ive got no room to add new ones, and cant be bothered to go through and delete them.

[weirdbeardmt]

Oops. Now everything is bold. Need to fix that.

Are fonts case sensitive in stylesheets?

[Aes]

I don't believe so.

I always use lowercase because that's what the standards seem to prefer (plus -- it looks nicer and is easier to work with when everything is all lowercase).

[weirdbeardmt]

didnt think they would be somehow, but you never know. i know how picky some browsers can be (especially NS) for example fontfamily would work in IE but wouldn't in NS (I think!? NS needs the - i think).

[duckie]

Originally posted by weirdbeardmt
didnt think they would be somehow, but you never know. i know how picky some browsers can be (especially NS) for example fontfamily would work in IE but wouldn't in NS (I think!? NS needs the - i think).

Then IE should be spanked. The standards says with a dash.

Anyway, if you keep to the standards, Mozilla/Netscape 6 should interpret CSS perfectly, IE5/5.5 did not get the CSS box model correct, but don't worry about it too much now.

Netscape 4 is an issue, there are certain things to consider.

[Aes]

font-family works in IE5.x, NS 4.7x, and Mozilla/NS6.x....

[Aes]

I just noticed something. When you use this:

Originally posted by weirdbeardmt
.someclass {font-family: tahoma, verdana, arial, sans-serif};

The syntax is completely wrong -- you have a ; after the } which is not good. Plus, you're missing spaces between the {'s and the properties and the properties and the }'s.

Use this instead:

.someclass { font-family : tahoma, verdana, arial, sans-serif ; }

See if that makes any difference.

[weirdbeardmt]

Originally posted by Aes
font-family works in IE5.x, NS 4.7x, and Mozilla/NS6.x....

It was just an observation at the differences in CSS browser compatibility. Like if you used this:

.something {font-colour: ;}

IE would continue and display anything after it, whereas NS would get annoyed, and lose any further formatting in the stylesheet.

I just noticed something. When you use this:

quote:
--------------------------------------------------------------------------------
Originally posted by weirdbeardmt
.someclass {font-family: tahoma, verdana, arial, sans-serif};
--------------------------------------------------------------------------------


The syntax is completely wrong -- you have a ; after the } which is not good. Plus, you're missing spaces between the {'s and the properties and the properties and the }'s.

Actually, that wasn't taken out of my actual stylesheet I just quickly typed it out, and got it wrong - in the actual file the }'s and the ;'s are the right way around.

But I didn't know about the need of the spaces. What difference does that make?

[duckie]

Actually I don't believe the spaces are mandatory, but yeah that semi-colon should go into the curly bracket.

[Aes]

The spaces aren't mandatory in the capacity that browsers interpret them -- but it is good practice to put them in.

Mainly it makes your stylesheets cleaner, and it's more valid according to W3C's standards.

[duckie]

Originally posted by Aes
The spaces aren't mandatory in the capacity that browsers interpret them -- but it is good practice to put them in.

Mainly it makes your stylesheets cleaner, and it's more valid according to W3C's standards.

I really don't mean to question you, but where is this mentioned in the standards? I'm just curious, because I don't recall seeing this mentioned anywhere.

Anyway, yeah it is always good practise to make your code more legible. This is how I do my CSS:

p { 
  font-weight: bold; 
  font-size: 12pt;
  font-family: helvetica; 
}

[Aes]

It's not mentioned in the standards, but they are given as examples.

And I'm primarily referring to global stylesheets -- not the linked ones. Returns should have the same effect.

[duckie]

I really think the white spaces are in the examples to improve legibility, and have no effect on how clients interpret them. I mean, if there must be white spaces to guarantee correct parsing, it would have been explicitly mentioned right?

Hmm...wasn't there a discussion on the very same topic some time ago? Here we go again.

[weirdbeardmt]

I remember reading it to.

But referring to legibility...

I dont understand people who write their sheets like this:

.thistag {font-family: lots of different fonts; font-color: a colour; font-size: a size...}

OK so the example doesn't work too well but they write it as one enormous long list on one line. It makes it really hard to read. I prefer putting each element on a new line, and presumably, the extra blank lines in the page don't increase the file size?

[duckie]

Originally posted by weirdbeardmt
OK so the example doesn't work too well but they write it as one enormous long list on one line. It makes it really hard to read. I prefer putting each element on a new line, and presumably, the extra blank lines in the page don't increase the file size?

It does actually. Every carriage return (everytime you press Enter) adds one or two bytes. Every space adds a byte. Every tab adds a byte.

These bytes adds up for a busy website.

[weirdbeardmt]

Right OK, so then big stylesheets which are written legibly are actually making the site slower?

That can't be good.

[duckie]

The size increase is pretty negligible unless you are running some millions of hits per month site I would think.

The user should not notice any drastically longer load times unless he's on something like 33.6, it is your bandwidth costs that is an issue here.