Webmaster - Fonts in web pages

When you use a font in a web page, it will only be displayed if the users has the same font installed on their computer.

  • You have no way to force the user to download and install a specific font.
  • You can't be sure that the fonts are installed on the user's computer.
  • You can't be sure of how your page will be rendered in the browsers.

Using alternative fonts

For example, if you want your page to display the "Trebuchet MS" font . Then specify:

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 

By putting "Trebuchet MS" first, you specifiy that the page is to be displayed using this font.

  • If the user has font installed , then the page will be displayed with Trebuchet MS.
  • If the user does not have this font, the browser will try successively with each following ones (Verdana, Arial ...).

Simply specify fonts that are graphically/visually close to the font you want to use.

The default types

There are 3 kinds of default fonts that all browsers recognize:

  • serif:
  • sans-serif
  • monospace

When you specify the font to be used, it is good practice to always specify one of these three generic fonts as a last resort.

Typically, as in our above example:

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 

Sans-serif is the font that will be closest to "Trebuchet MS" and in the worst case you will have a website that looks slightly different from your original concept.

The appearance of the default fonts

Each operating system and browser interprets the default fonts differently

  • serif: It's "Times New Roman" under Windows, and the "Times" on the Macintosh (which is different from Windows).
  • sans-serif: This is the "Arial" in Windows, and the "Helvetica" on Macintosh.
  • monospace: "Courier New" in Windows, "Courrier" on the Macintosh, and often "VeraSans" or "DejaVuSans" Linux.

Here the appearance of the fonts under Windows (in Internet Explorer):
Under Windows, but with ClearType enabled:
MacOS X (Safari):
Linux (Ubuntu - Firefox):


For serif fonts, specify:
"Times New Roman", Times, serif;

For sans-serif fonts, specify:
Verdana, Arial, Helvetica, sans-serif;

(Verdana has a better screen readability that Arial, even though there is controversy over the use of the police).

For monospaced fonts:
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;

Vera and DejaVu font families are Open source and allows the best readability.

The fonts available upon installation of Windows XP.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jean-François Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.
This document, titled « Webmaster - Fonts in web pages », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).