For my website I have chosen to use some pretty obscure fonts in my font family. The most well known font (3rd in family) is Century Gothic, which most computers have.
font-family:Tw Cen MT,Gill Sans,Century Gothic,sans-serif;
The problem is that 12px font in century gothic is far bigger than a 12px font in Tw Cen MT & Gill Sans. IF a computer falls back on Century Gothic, the fonts will be a mess. I NEED A Jquery solution that says, century gothic will have a font-size of 75% of the normal value. I don't need it to detect fonts. I just need it to say, if century gotchi is being used, make the font size 75% of the normal value. Any solutions?
Best Answer
I think the issue is the relatively tall x-height of Century Gothic. Try using
ex
units in yourfont-size
declaration.ex
units are based on height, unlikeem
,px
, andpt
.Setting the
line-height
to a pixel size would also help normalize the height, but would cause problems for users who change the text zoom level in their browser.Edit: I went back and tested, and ex units don't help. Century Gothic is both taller and wider than the others.
The issue is, the DOM will not allow you to tell which specific font the user has from your listed alternates, and CSS doesn't allow separate font sizes (or adjustments) for each font.
However, JQuery can test the size of a container of text. So, if you provide a hidden element on your page with a known letter in it, you can test the width of that element on the user's browser.
Since the width of that letter will be determined by which font the user has installed, you can compare that width to the width of the same text in your preferred font on your own computer and compute a font size for the user that roughly matches what you intended.
Example code:
Four caveats: