Fonts used in web pages

Last update on June 6, 2009 09:23 AM by jak58
Published by netty5

Fonts used in web pages





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):
Best answers for « Fonts used in web pages » in :
Personalize web pages with GreaseMonkey Show Personalize web pages with GreaseMonkey What is GreaseMonkey? Example 1 Example 2 XPath Utilities removeElement() removeAttributeOfElement() setAttributeOfElement() injectCSS() Links What is GreaseMonkey? GreaseMonkey is an...
White background's problem in web pages Show Your web pages will be displayed more accurately : No background color, everything is white !!! (Like this image) To resolve this problem follow these steps : 1. Go to the "Control Panel" : Click on "Option accessibility" 2. In the...
How can I save web pages on my computer? Show How can I save web pages on my computer? IE Google Chrome Firefox IE For Internet Explorer, click on the File menu. Click on "Save As" In the "Save as type" field, drop down the list and choose "Web Archive (Single...
Centering vertically a web page ShowCentering vertically a web page e .js file e .html file Centering vertically a web page; consider it as a waste time trying to achieve it with CSS. The most practical solution is to use JavaScript. e .js file Copy/paste the...
Stopping animated images on Web pages ShowStopping animated images on Web pages Internet Explorer Mozilla Firefox Opera Ad blocking Animated images are annoying you and slow down the display of web pages you visit? Do not panic, you can stop. Internet Explorer In...
[Internet Explorer]Ignore colors specified on Web pages Show[Internet Explorer]Ignore colors specified on Web pages It is possible with Internet Explorer to use a custom background color during your web browsing. To change the white background and default fonts in colors of your choice, open...
Download Page Saver Basic ShowThe tools of screen shot only capture the visible zone of the screen. It is sometimes necessary to have a complete capture of a web page. Pearl Crescent Page Saver is an extension of Mozilla Firefox allowing the capture of a whole web page. The...
HTML forms ShowForms Interactive forms let web page authors give their pages interactive elements, such as for receiving messages from their readers, much like the reply cards found in some magazines. The reader enters information by filling in fields or clicking...
Managing images in HTML ShowHow do you display images on a web page? Having a few images on a website can make it more attractive and user-friendly. However, it is important not to go overboard, since images can take a long time to load, and in some cases can make a document...
Hyperlinks ShowIntroduction to anchors Hypertext links or hyperlinks (anchors) are HTML elements that, when clicked on, enable readers to visit a new address. Hyperlinked text is underlined by default. Hyperlinks are what connect web pages to one another. They...