Using fonts on the web
Web Fonts
The fonts available when a web page is rendered in a web browser depend on which fonts are installed on the user’s system. While a user can install more fonts, it is the fonts that come as default for an operating system that are the ones most commonly available, so are considered safe to use. This makes it more operating system dependent than browser dependant, so, or example, Firefox on Mac OS 10 will typically have a different set of fonts available to Firefox on Windows 7. If a font is not available, the browser will fall back to the default font of that ‘type’ that is available, so while the web page will sill be usable, it will have a slightly different font. The type is one of: serif, sans-serif, monospace or cursive.
Fonts generally available
The following is a list of fonts that are considered safe to use on the web, as they are installed on most systems. Unfortunately, it’s a fairly standard and not very inspiring list and it’s definitely best not to use Comic Sans. Lots of good info can be found on the CodeStyle.org website.
| Family | Example |
|---|---|
| Georgia | The quick brown fox jumps over the lazy dog. |
| font-family: Georgia, Constantia, ‘Lucida Bright’, ‘DejaVu Serif’, serif; | |
| Palatino | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Palatino Linotype’, Palatino, ‘URW Palladio L’, ‘Book Antiqua’, serif; | |
| Times New Roman | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Cambria’, ‘Hoefler Text’, ‘Times New Roman’, Times, ‘Utopia’, ‘Liberation Serif’, serif; | |
| Bookman | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Bookman Old Style’, Bookman, ‘URW Bookman L’, serif; | |
| Verdana | The quick brown fox jumps over the lazy dog. |
| font-family: Verdana, ‘Lucida Grande’, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, sans-serif; | |
| Trebuchet | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Segoe UI’, ‘Trebuchet MS’, Candara, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, sans-serif; | |
| Helvetica/Arial | The quick brown fox jumps over the lazy dog. |
| font-family: Helvetica, Arial, ‘Liberation Sans’, ‘DejaVu Sans’, sans-serif; | |
| Arial Narrow | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Arial Narrow’, ‘Nimbus Sans L’, sans-serif; | |
| Lucida Sans | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, ‘DejaVu Sans Condensed’, sans-serif; | |
| Tahoma/Geneva | The quick brown fox jumps over the lazy dog. |
| font-family: Tahoma, Geneva, sans-serif; | |
| Arial Black | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Arial Black’, sans-serif; | |
| Impact | The quick brown fox jumps over the lazy dog. |
| font-family: Impact, Haettenschweiler, sans-serif; | |
| Courier | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Courier New’, Courier, ‘Nimbus Mono L’, monospace; | |
| Andale Mono | The quick brown fox jumps over the lazy dog. |
| font-family: Consolas, ‘Andale Mono’, ‘Lucida Console’, ‘DejaVu Sans Mono’, ‘Lucida Sans Typewriter’, monospace; | |
| Chancery | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Apple Chancery’, ‘URW Chancery L’, ‘Monotype Corsiva’, cursive; | |
| Comic Sans | The quick brown fox jumps over the lazy dog. |
| font-family: ‘Comic Sans MS’, cursive; | |
Update the example text above:
Using Images
Typically a web page may want a particular font for the title, or logo, and to use a standard for for the main body of text. In this situation the title can be included in the web page as in image, rather than plain text.
Web Fonts
It is coming increasingly common for the font to be downloaded with the web page. This adds an overhead to displaying the first page. However, once downloaded the font will be cached in the browser, so it doesn’t need to be downloaded with each page. With a modern broadband connection, this overhead is not that significant, so this is good option.
Google Web Fonts has lots of free fonts. You can download the font to use on your own system, or just link your web page to Google hosting the font. It is really easy to set up a web page to use a Google Web Font; this uses only a couple of lines of HTML/CSS and it works really well.
There are lots of other options, some of which allow you to download free fonts, and some of which are subscription services. These include:
fontsquirrel.com,
openfontlibrary.org,
typekit.com,
fonts.com,
myfonts.com.