Cross-browser fonts

One problem in web design is when you want the text on your page to look the same on every computer.

Personally I belong to the dwindling school that respects the user's preferences: if the user has chosen a certain look for their browser, why force your own choices on them? But I recognise that may not always work, and sometimes it's necessary to go with your own choices all the way.

The most thorough solution is to use a webfont: upload your own font to the server and let the user's browser download the font in order to display the page. In many cases, however, this is overkill; unless you are a font designer or you have other reasons to make absolutely, positively certain that every user of your site sees the exact same rendering of the page, down to the very subpixel, there are some more lightweight means to ensure that the look and feel is not too dissimilar.

1. Specify the font size in pixels.
   Not everybody may have the same default font size as you. So if you don't specify a font size, or you make the mistake of setting only a size of 75% on body, it won't be the same everywhere.
   font-size:15px; /* Or your desired font size */
2. Use a fallback font.
   For example, if you want to show a serif font, like DejaVu Serif, make sure they see at least a serif font if the font of your choice is not available on the user's computer.
   font-family:'DejaVu Serif', serif;
3. Keep in mind that fonts may be named differently on the user's computer.
   Although the user may not have the exact same font by name, they may have a font that was designed to look the same, only with a different name for copyright reasons. Put those other names in the font family specification too.
   font-family:'ITC Bookman', 'Bookman Old Style', 'URW Bookman L';
4. To make absolutely sure that your CSS will work everywhere, use the correct capitalisation. The specs say that font names may be case sensitive, so don't assume they're not. Write 'Palatino Linotype' rather than 'paLatino linOtypE'. And use quotes around font names. Leaving the quotes off may save two bytes, but it can possibly get you into trouble later.
5. Now although many fonts were designed to look like other fonts, there are still variations in size. So if your browser supports it, use a font-size-adjust property to iron out those differences. Set this value to the relative x-height of the base font, i.e. the ratio of the height of lowercase letters to the font size. Specify the line height too, since different fonts have different default line heights.
   font-size-adjust:.5; line-height:1.2; /* fill in original x-height and line height */
6. And for some extra fine-tuning, you can use the font-variant property. For example, to specify how numbers should look. Some fonts have "old style" digits, that are like lowercase letters in height, and if a font contains both types of digits, you can choose between the two:
   font-variant:lining-nums or oldstyle-nums;

Do it like this in your webpages and it will go a long way towards a uniform look across platforms.

Now some of you may think, “but doesn't the operating system take care of that for you? Doesn't the system substitute known fonts for those that aren't installed?”
Well, yes and no. Don't count on it. The user's system may not know the names of some of the fonts you're suggesting. In addition, there have been browsers in the past that bypassed this feature of the system; Opera for instance, even if the system would use Times New Roman when the font said 'Times', Opera didn't use that. So it's best to play it safe.