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 of thought 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; line-height:1.2;
  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. Remember 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 be the same, only with a different name for copyright reasons. Put those other names in the font family specification too.
  4. And 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.
    font-size-adjust:.5 /* fill in original x-height */;
  5. 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.
So, here we go then. For proportional fonts:
Your fontSuggested font styles
Arialfont-family:'Arial', 'Liberation Sans', 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'FreeSans', sans-serif;
font-size-adjust:.52;
Arial Blackfont-family:'Arial Black', 'DejaVu Sans', 'Cantarell', sans-serif;
font-size-adjust:.52; font-weight:900;
Arial Narrowfont-family:'Arial Narrow', 'Liberation Sans Narrow', 'Nimbus Sans L', sans-serif;
font-size-adjust:.52; font-stretch:condensed;
Baskervillefont-family:'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Garamond', 'Times New Roman', serif;
font-size-adjust:.42;
Bitstream Charterfont-family:'Bitstream Charter', serif;
font-size-adjust:.53;
Bitstream Vera Sansfont-family:'Bitstream Vera Sans', 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
font-size-adjust:.55;
Bookmanfont-family:'ITC Bookman', 'Bookman Old Style', 'URW Bookman L', serif;
font-size-adjust:.51;
Calibrifont-family:'Calibri', 'Candara', 'Segoe', 'Segoe UI', 'Optima', 'Nimbus Sans L', sans-serif;
font-size-adjust:.47;
Cambriafont-family:'Cambria', 'Georgia', serif;
font-size-adjust:.47;
Clarendonfont-family:'Clarendon', serif;
font-size-adjust:.52;
Comic Sansfont-family:'Comic Sans MS', 'Comic Sans', 'TSCu_Comic', cursive;
font-size-adjust:.54;
DejaVu Sansfont-family:'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
font-size-adjust:.55;
DejaVu Seriffont-family:'DejaVu Serif', 'Verana', 'Baskerville', serif;
font-size-adjust:.52;
Franklin Gothicfont-family:'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', sans-serif;
font-size-adjust:.50;
Futurafont-family:'Futura', 'BetecknaLowerCase', 'Trebuchet MS', sans-serif;
font-size-adjust:.46;
Garamondfont-family:'Garamond', 'Apple Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
font-size-adjust:.43;
Georgiafont-family:'Georgia', 'DejaVu Serif, 'Bitstream Charter', 'Times New Roman', 'Times', serif;
font-size-adjust:.48;
Gill Sansfont-family:'Gill Sans', 'Gill Sans MT', 'Calibri', sans-serif;
font-size-adjust:.45;
Gothicfont-family:'Century Gothic', 'URW Gothic L', 'Apple Gothic', 'AppleGothic', 'Avant Garde', 'ITC Avant Garde Gothic', 'Futura', sans-serif;
font-size-adjust:.55;
Helveticafont-family:'Helvetica Neue', 'Helvetica', 'Arial', 'Liberation Sans', 'Nimbus Sans L', 'FreeSans', sans-serif;
font-size-adjust:.53;
Lucida Sansfont-family:'Lucida Sans', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
font-size-adjust:.53;
Microsoft Sans Seriffont-family:'Microsoft Sans Serif', 'DejaVu Sans', sans-serif;
font-size-adjust:.52;
Palatinofont-family:'Palatino Linotype', 'Palatino', 'Palatino LT STD', 'URW Palladio L', 'Book Antiqua', 'Georgia', serif;
font-size-adjust:.45;
Schoolbookfont-family:'Century Schoolbook', 'Century Schoolbook L', 'New Century Schoolbook', serif;
font-size-adjust:.47;
Tahomafont-family:'Tahoma', 'Liberation Sans', 'Verdana', 'Verana Sans', 'Segoe', sans-serif;
font-size-adjust:.54;
Timesfont-family:'Times New Roman', 'Times', 'Liberation Serif', 'FreeSerif', 'Nimbus Roman No9 L', 'Baskerville', serif;
font-size-adjust:.45;
Trebuchetfont-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', sans-serif;
font-size-adjust:.52;
URW Chancery Lfont-family:'URW Chancery L', 'ITC Zapf Chancery', 'Zapf Chancery', 'Apple Chancery', 'Monotype Corsiva', cursive;
font-size-adjust:.40;
Verdanafont-family:'Verdana', 'Geneva', 'Lucida Sans Unicode', 'Verana Sans', 'DejaVu Sans', 'Bitstream Vera Sans', sans-serif;
font-size-adjust:.55;
Zapf Chanceryfont-family:'ITC Zapf Chancery', 'Zapf Chancery', 'URW Chancery L', 'Apple Chancery', 'Monotype Corsiva', cursive;
font-size-adjust:.45;
And for monospaced fonts:
Your fontSuggested font styles
Consolasfont-family:'Consolas', 'Droid Sans Mono', 'Lucida Console', 'Liberation Mono', monospace;
font-size-adjust:.49;
Courierfont-family:'Courier New', 'Courier 10 Pitch', 'Courier', 'FreeMono', 'Nimbus Mono L', 'Lucida Typewriter', monospace;
font-size-adjust:.43;
DejaVu Sans Monofont-family:'DejaVu Sans Mono', monospace;
font-size-adjust:.55;
Lucida Consolefont-family:'Lucida Console', 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
font-size-adjust:.53;
Monacofont-family:'Monaco', 'Consolas', 'Lucida Console', monospace;
font-size-adjust:.55;

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.