I love typography, so the ability to use my own fonts on a web site is a very welcome recent addition. But there are a few issues I came across while trying them out.
Fonts only really work on high resolution displays
Making a font that also works well on low resolution displays is a lot of hard work, since it forces you to work with quite few pixels, and the low resolution requires you into a somewhat wider character width to keep the features easily distinguishable. Most fonts do not have this amount of attention put into them, and become relatively difficult to read at small sizes. Since you will not be able to notice much of the font with such a coarse display anyways, it is best to stick to default fonts for them. I know, Georgia and Verdana are getting a bit old on the eye, but they will be much more legible for your reader.
Your CSS should use media descriptors to use two differrent fonts depending on pixel density. The trick is to encapsulate your @font-face and font declarations in an @media block, then the fonts will not even load on low resolution displays:
1 2 3 |
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), screen and (min-resolution:200dpi) { ... } |
Font Boxing
One potential problem with web fonts can be their metrics. The browser puts a bounding box around your text and uses that to calculate the position. The font designer determines where the characters will fit into this box, and the choice is sometimes quite different from the standard fonts, leading to layout problems. If there are issues, text inside styled buttons will show them. Remember to check both with and without ascenders / descenders to see if they look OK.