Webmaster - Fonts in web pages
On March 22,2022 by Tom Routley
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.
The fonts available upon installation of Windows XP.
Leave a Reply