Uncommon Fonts
Using uncommon fonts in your web page or website can be a problem.
Windows based and Mac based computers come with different fonts installed by default.
One problem web designers have is that they forget that the average computer user may not have the same fonts installed on their machine.
Once you add a program such as a word processing program or graphics program to your machine it will most likely add additional fonts to your computer also.
So, you happily design your web page/website with the fonts available on your computer. You upload the site then go over to your friend’s house or client’s office to show off what you have done. Disaster! The page looks nothing like you intended. Why? Because you have used a font that is not available on the other person’s machine. The other machine either does not have the same font installed or it is running a different operating system (back to the Windows vs Mac issue).
How do you solve the problem of uncommon fonts?
Windows Based vs Mac Based Default Fonts
By default, a Windows based computer will have a different set of fonts from a Mac computer.
Least Complicated Solution to Uncommon Fonts
When setting the font family for the web page or website you need to list a Windows font, a Mac font and an optional font.
If you take a look at Common fonts to all versions of Windows & Mac equivalents there is a list of the default fonts installed on Windows and Mac computers.
Let’s take a look at an example from that list.
Verdana, Verdana, Geneva, sans-serif
From this example you can see that Verdana is available on both Windows and Mac based computers so that would be a safe choice of font.
Including Geneva in the font family setting of your stylesheet would cover Mac machines that do not have Verdana. Likewise, including sans-serif takes care of machines that do not have Verdana or Geneva fonts.
Setting Font Family in Stylesheet
In the stylesheet for the web page/website set the font family as follows (substitute your chosen font names):
FONT-FAMILY: Verdana, Geneva, sans-serif
If you wish to have the same font all the way through the web page/website then you would set the font family within the body tag style. This way you only have to specify it once as the font family is to cascade down the document.
To set the font to be different for specific tag, say the paragraph tag, then you would set the font family within the paragraph tag style.
There are other ways to over come the uncommon font issue which are more complicated for the beginner web designer but we’ll leave that for another post.
Related Reading About Fonts
Firefox 3: Fonts and text – more information about fonts in general, not just related to Firefox.
Copyright © 2005 - 2008 Web Page Mistakes. All rights reserved.
October 13th, 2008 at 3:10 pm
[...] Choosing the correct font type that suits the theme of the website and that are available to the average website visitor is one of the first steps to legibility. Fancy fonts can be difficult to read and may not be available on the visitor’s computer. More on Uncommon Fonts… [...]