Specifying alternative fonts in CSS

[chuteless]

Hi,

I'm currently working on a website, and have specified the font I want to use in my style sheet, followed by a few alternatives (separated by commas as usual).

What I would like to do though is specify the font size for each alternative aswell....for example my main font looks best at 75% (12px - which I have set using font-size), but if the visitor doesn't have this font installed and it goes to the second option, the second one looks best at 68.75% (11px), but I have no idea how to do this!

Is there any way of specifying individual sizes for each alternative font in my list?

Thanks!

[alexdunae]

Wouldn't that be nice! Unfortunately it isn't possible with CSS.

[Marshall]

One possible way is alternate style sheets and a browser detector. I believe Safari does not support Arial, but instead usses Verdana (don't quote me on that ;) ). But even this would not be perfect and would require some research as to client default fonts.

Marshall

[chuteless]

Oh well....it was worth a try. Thanks for the replies!

[penders]

I believe Safari does not support Arial, but instead usses Verdana (don't quote me on that ;) ).

I believe that Helvetica is the Mac alternative to Arial on Windows (or rather Arial is the Windows alternative to Helvetica!) I'll stand my ground and let you quote me on that! ;) Verdana is common on both Windows and Mac (but not Unix?)

What I would like to do though is specify the font size for each alternative aswell....

I have thought about doing something similar as I would have liked to have used a bold version of the alternative font whereas I wanted the normal version of the primary font.

I thought that may be you could read the font-family (or fontFamily on IE) property using JS to see which font was actually chosen, but on preliminary tests it seems to simply return whatever gobbledygook has been set in the CSS.

I wonder if it's possible to set the font-family on a particular container and measure any difference in the dimensions of that container to help determine if a font is available....?!

[alexdunae]

The SIFR 3 Flash/text replacement widget has an interesting feature in its debug mode - it measures the ratios of the replaced font (see notes in the wiki [wiki.novemberborn.net]).

That said, if you really want good looking fonts I would check out SIFR 3 - it is much improved over v2 and great for heading type.