The @font-face Step No One Tells You
Everyone has been ranting about how great @font-face is lately. If you take a look at my header you’ll see I totally agree. But, if you want your site to work with browsers that don’t support @font-face, you may run into issues with font size.
Many fonts available for embedding do not have the same heights as those typically available (Verdana, Georgia, Comic Sans, etc). This can cause some horrible formatting issues when that embedded font is not available to the user.
So, what to do? Searching around, there’s really only 2 solutions:
- Only embed fonts that have similar heights to the other fonts in your stack, or
- Utilize some javascript to check for @font-face support
I don’t know about you, but I prefer option 2. You could use something like Paul Irish’s @font-face feature detection script and just add a class somewhere or just use Modernizr (uses his script for part of the detection) which does all that for you and more.
As an example, you could have something like:
h1 { font: 21px/1.5 MyWebLicensedFont, Helvetica, sans-serif; }
.no-fontface h1 { font-size:16px; }
Pretty simple and would make a huge different for your users.
