CSS font question

larryhead

Hello!

I just finished a site for a client and they are complaining that they want "Helvetica Light" instead of the standard "Helvetica" that I've used. Is this possible to do in CSS? I would really hate to have to use GIF's to accomplish this.

Here is my current font definition btw:

.header_txt {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 16pt;
font-weight: normal;
color: #ACACAC;
}

Thanks for any help you guys can provide! 🙂

devinemke

you can specify whatever font you want in your font-family list. whether that font will be used depends entirely on whether the client has that particular font installed.

larryhead

Hi devinemke, thanks for the reply. Are you suggesting something like:

font-family: Helvetica Light, Helvetica, Verdana, Geneva, Arial, sans-serif;

I wasn't sure if that would actually work... though the browser is supposed to work left to right until it finds a font the client has installed, so maybe it'll work for some people.

Also, I've tested this option out too:
font-weight: lighter;

but unfortunatley it still looks identical to:
font-weight: normal;

😕

bpat1434

Note: If a family-name contains white-space, it should be quoted. Single quotes must be used when using the "style" attribute in HTML.

SO your declaration should be:

font-family: 'Helvetica Light', Helvetica, Verdana, Geneva, Arial, sans-serif;

The font-weight attribute can take the form of a digit from 100 to 700 (lighter -> bold). try using 100 as the font-weight (400 is supposed to be "normal") but older browsers (pre IE 4, NN4, FF 1) won't support this though.

larryhead

bpat1434 wrote:
SO your declaration should be:
font-family: 'Helvetica Light', Helvetica, Verdana, Geneva, Arial, sans-serif;
The font-weight attribute can take the form of a digit from 100 to 700 (lighter -> bold). try using 100 as the font-weight (400 is supposed to be "normal") but older browsers (pre IE 4, NN4, FF 1) won't support this though.

Thanks very much! This worked beautifully. 🙂

larryhead

Note: If a family-name contains white-space, it should be quoted. Single quotes must be used when using the "style" attribute in HTML.

Also, I check over here and saw they were using double-quotes around the font families w/ whitespace...
http://www.w3.org/TR/REC-CSS2/fonts.html#font-family-prop

So maybe you only need single-quotes if your styles are all inline?

Not sure.. but thanks again for your help!

Weedpacket

If you're using the styles inline - i.e., as HTML attribute values - then the quoting style you use to delimint font-family names would have to be the opposite of the one you're using to quote the attribute values. If your attribute values were single-quoted, then you'd need to use double quotes in the CSS. (The reason for all of this should be obvious 🙂).