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” ?
Any help will be highly appreciated.
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.
Hope this helps!
