Webmaster - Fonts in web pages

March 2017


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):

Recommendations


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.

Links


The fonts available upon installation of Windows XP.




Related


Published by deri58.
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).