I am using an 'rtl' font (named as JNN) in horizontal menu bar, which is normal & readable at 18px where as the alternate available 'rtl' fonts (like Tahoma & Arial Unicode MS) on Windows are too much big at 18px.
Due to this dissimilarity in 'font-width', If a visitor to my wordpress-site has no JNN font installed on his computer, the menu-bar will shown to him in Tahoma/'Arial Unicode MS' font and hence these fonts disturb the menu-bar-length due to high font-size.

Is there any solution through javascript to check the "font-availibility" at the user's end, and if found use "Font-Size-A" and if not then use "Font-Size-B" ?

@syed: This is not really a WordPress question (the core of your question is how to detect the availability of a font), so I voted to close it and suggest you ask it on Stack Overflow. Make sure to link to the other question, tell what you tried, and how it did not work.
–
Jan FabryNov 26 '10 at 16:55

@Jan Fabry: OK. leave the javascript question (how to detect the availability of a font?) I have a font detector javascript file here : (wordpress.pastebin.com/EqGPZ8CC). My question is : Using this javascript, How can I add a code in the header.php file such that : If an specific font (named as "Andalus.ttf") is found, then use stylesheet styleA.css, otherwise use styleB.css
–
syedNov 26 '10 at 19:39

@syed: Interesting, because you need to execute the check on the client side and choose the style sheet there. You will probably have some redrawing as you load the extra stylesheet (the first time, then you probably can set and check a cookie). Would it be possible to create a "normal" style.css, and an extra style-with-small-font-size.css that you load too for those that don't have your fonts? This will improve the experience for the group that has the fonts.
–
Jan FabryNov 26 '10 at 20:31

@Jan Fabry: In WP header.php, can we define two stylesheets at the same time? One with fontA and other with fontB ? Is it possible? If it is, then I think, theres no need to check the availibility of installed fonts!
–
syedNov 26 '10 at 21:19

3 Answers
3

Not exactly what you asked for, but you can kind of "make sure" the user has the desired font through the @font-face css3 rule.

According to caniuse.com about 95% of global users can use that css property, so it's a good trade-off.

Different browsers use different font formats however, so you'll need to use http://www.fontsquirrel.com/fontface/generator to generate all your required fonts. The site will also provide you with some extra details on how to use the fonts.

Paul Irish has a great blog post about font-face and how to use it properly here. (go to his blog and search for font-face) I would have posted the link myself but I can't post more than one link cause I'm a new user.

This solution uses two stylesheets: wpse-4508-default.css and wpse-4508-small.css. We always load the default, and load the small version too if a certain font does not exist. We save the result in a cookie so the next time don't need to do the test and extra loading on the client side, resulting in a smoother experience. The code is designed to run from your theme directory, so you can add the PHP code to your functions.php. I added some var_dump() and alert() lines to help you understand what goes on. I only tested it in Safari on Mac OS X.

Indeed, you can add the CSS later, but that could result in a "flash of unstyled text" when it loads a bit later.
–
Jan FabryFeb 5 '11 at 23:00

@Jan Fabry: That's why I suggested to control via a class value first, that could trigger an already loaded CSS. done on DOM Ready should prevent flashes at least at best it could get.
–
hakreFeb 5 '11 at 23:06