Fonts used in web pages

December 2016





If you have chosen the perfect font that reflects the atmosphere of your website as well as the global idea that you want the user to get from it, you should be careful about one single thing; the user might not have the same font that you have downloaded on his computer. The fonts used do not depend on the browser but on the fonts that are available (sometimes they can be downloaded from the web) on the user's font folder found in the WINDOWS folder.

How to solve this issue?


To solve this issue, all you have to do is to insert several alternative fonts together with the original font that you want to display on your website.

Example:

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

The original font that should be displayed is Trebuchet MS. If the user does not have it, the next alternative font that will be used will be Verdana. If the user still does not have it, the next alternative font that will be used will be Arial...then Helvetica...and finally sans-serif.

Note: always use alternative fonts that are very close to the original font, that is that are alike in display.

Default fonts


However, there are three fonts that every computer will always recognize by default. They might not be very fancy but at least your text will be displayed on the web browser being used by the user. These default fonts are:
  • Serif: referred most of the time as:Times New Roman
  • Sans Serif: referred most of the time as:Aria
  • Monospace: referred most of the time as:Courrier New


You should be also note that they will display differently depending on the operating system that are being used by the user.

Below is how the font will be displayed with a Windows Operating System:



Below is how the font will be displayed with a Windows ClearType:


Below is how the font will be displayed with a Mac OS X (Safari):


Below is how the font will be displayed with a Linux (Firefox):

Related :

This document entitled « Fonts used in web pages » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.