Change font-size if client doesn't have primary font, CSS

mindweaver used Ask the Experts™
I want to use the new Vista-font Calibri on my website on certain elements like the menu. The problem is that most users does not have this font yet.

When I set font family like this "font-family:Calibri,Trebuchet MS" it selects T MS for users without Calibri installed. Problem here is that they differ in size. 11pt Calibri is not the same size as Trebuchet MS 11pt. This destorys my design and layout.

What I would like is the font size to change depending on wether the client has Calibri or not.

Something like this  "font: (Calibri, 11pt), (Trebuchet MS, 10pt);

Is there any way to make this happen with css or javascript?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®


Seems like I messed up. Calibri and Trebuchet MS did infact have the same ratios. So I don't have a problem. But you will definetly earn your points on both your solutions.

Thanks alot.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2007

yes sifr is a good option.

the other way is to use a javascript / CSS script that checks is a font is available, and if it returns true you then apply a different class (with your alternate font) to the headings.

This is still a good question that I am sure others will find useful ;-)

Instead of using pt(point) as size use px(pixel) as font size.
            font-family:Calibri,"Trebuchet MS";
px font size is not scalable in IE
ems are better.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial