Conditional CSS based on Fonts available/installed

HTML & CSS
1

I’m aware that we shouldn’t be worried about being pixel-perfect with everything, but when you have a picky client and you’re picky yourself…

Is it possible to detect if a font is installed and if so, use a slightly different css style for that situation?

E.g. Corporate font for client is Frutiger, available on a few macs and hardly any PCs. Client want the site to use Frutiger Reg, when available and fall back to Helvetica, then Arial in the stack.

Helvetica and arial have quite a deeper x-height to Frutiger. We have some text base-aligning with the bottom of a logo and When viewed with Frutiger on the box, it aligns perfect. When viewed using Arial/Helvetica box, the text is about 2 r 3 pixels too low down.

So can we check if a font is available on a pc and serve up a conditional bit of css and if yes… HOW?

2

I don’t think so - and I sincerely hope not. I don’t want anybody’s website trying to detect what I have installed on my computer.

3

It seems like you are looking at the issue from the wrong end… since if the browser has the font it will use it and then you have the option of embedding fonts. Furthermore you cannot really determine other display setting the user may be using down to a pixel, what if I have a zoomed text, or override some browser settings, etc.

4

Without going down the route of scanning the user’s computer, what would be good would be to able to specify, for example:
{font:calibri 110%, verdana 90%, arial 100%;}
so that the browser chooses the appropriate font size for whichever font it is using. Unfortunately I’m not aware of a way to do even that.

5

I am wondering if the font value can be placed in the BODY within the CSS (frutiger, helvetica, arial). Then Javascript could detect the font being used by the computer, then the script could dynamically place both an attribute and value to, say, a <p> element: like <p rel=“frutiger”>, then in the CSS do a selector like this: p[rel*=“frutiger”] { font-size: 100%; }.

Would that work? I don’t know if it is possible for Javascript to detect that though.

6

That’s the real problem. You should try to choose fallback fonts that more closely closely match the preferred font. E.g.


font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
7

I think you need to make it clear to the client and yourself that their computer is not the only one there is in the world. Likely look at the site on ten different monitors and they will all look slightly different. Perhaps there is a more effective way of achieving the design goal than what you doing taking all this into account.