Saturday, February 6, 2010
Browser Safe Fonts in CSS
When we design our web sites one thing that we make sure of is that it will look correct in everyone’s browsers on both PC’s and Mac’s. It is crucial that a font is chosen for the webpage that is present on everybody’s computer otherwise the browser will automatically substitute it for one of its own and the whole look of the site could be lost.
Using CSS style sheets, we specify the font-family to use for the web page (or portion of) with a list of (similar) fonts to use:
font-family: font1, font2, font3, generic;
If ‘font1’ is not present then ‘font2’ is used. If ‘font2’ is not present then ‘font3’ is used. If ‘font3’ is not present then a browser generic font is used.
There are four generic styles of font: sans-serif, serif, cursive and monospace. This gives the browser safe fonts as follows:
Sans-Serif:
font-family: “Arial”, “Helvetica”, sans-serif;
font-family: “Arial Black”, “Gadget”, sans-serif;
font-family: “Impact”, “Charcoal”, sans-serif;
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-family: “Tahoma”, “Geneva”, sans-serif;
font-family: “Trebuchet MS”, “Helvetica”, sans-serif;
font-family: “Verdana”, “Geneva”, sans-serif;
font-family: “MS Sans Serif”, “Geneva”, sans-serif;
Serif:
font-family: “Georgia”, serif;
font-family: “Palatino Linotype”, “Book Antiqua”, “Palatino”, serif;
font-family: “Times New Roman”, “Times”, serif;
font-family: “MS Serif”, “New York”, serif;
Cursive:
font-family: “Comic Sans MS”, cursive;
Monospace:
font-family: “Courier New”, “Courier”, monospace;
font-family: “Lucida Console”, “Monaco”, monospace;
You can simply copy a line above and paste into your own style sheet.
