Font Choices
You can use fonts from the following sources on your OM4 website.
There are various technical and licensing constraints that mean some fonts you have purchased for use with desktop software are not able to be used on your website.
| Option | Choices | Costs | Link |
| Typekit | Any Typekit font. | Free for OM4 hosted sites | TypeKit |
| FontShop | Any FontShop font with a web license. | FontShop pricing | FontShop |
| MyFonts | Any MyFonts.com font with a +Web license. | MyFonts pricing | MyFonts |
| FontDeck | Any FontDeck font | FontDeck pricing | FontDeck |
| Google Fonts | Any Google font | Free | Google Fonts |
| Web Safe | Any web safe font | Free | Web safe |
Fonts purchased from MyFonts and FontShop can be purchased for web and desktop. Typekit, Font Deck and Google Fonts are for the web only, so they can be used on your website but not through desktop software.
Some of these options may require assistance from OM4 to integrate.
More about Typekit or other @font-face based services
Typekit publishes a wide variety of fonts that can be used on websites. OM4 has published a WordPress plugin for Typekit that makes it easy to use Typekit fonts on WordPress. In addition to the fonts published on Typekit, you can purchase a web licensed font from FontShop.com and add this to your Typekit account to use on your website.
Another @font-face service is Fontdeck.com.
@font-face is a CSS based approach which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed.
Use Web Safe Fonts
Choosing one of the following fonts will mean your fonts are available for just about all of your visitors.
Fonts are specified using a font-family, with the left most font being used if available, otherwise falling back to the next font in the family. Using a generic fallback of serif, sans-serif or monospace means there will always be a font available in every case.
Serif Fonts
- Georgia, serif
- “Palatino Linotype”, “Book Antiqua”, Palatino, serif
- “Times New Roman”, Times, serif
Sans-Serif Fonts
- Arial, Helvetica, sans-serif
- Arial Black, Gadget, sans-serif
- “Comic Sans MS”, cursive, sans-serif
- Impact, Charcoal, sans-serif
- “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
- Tahoma, Geneva, sans-serif
- “Trebuchet MS”, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
Monospace Fonts
- “Courier New”, Courier, monospace
- “Lucida Console”, Monaco, monospace
Use Font Stacks with fall backs to web safe fonts
Because of the way font families allow fall backs, various font stacks have been put together that allow you to use a wider range of fonts. This includes fonts that may be available on a wide range of computers, but not all.
Here are some links to articles providing font stacks:
Image Replacement
If you would like to use a specific font that isn’t available for the web, it is possible to use an image replacement approach. This is time intensive, and makes it harder to add new content to your website, so it isn’t advisable unless you really need it.
To use this approach, prepare your headings and export them as image files. Then insert the images in place of your headings.
You may need a CSS rule to suppress display of automatic headings – you will need to use the correct selector for your website:
h1 {display: none;}
Other font replacement approaches for websites
Prior to the advent of @font-face, a variety of font replacement strategies were tried – sIFR, Cufon and Typeface.js are examples. The use of Flash in some of these solutions means they don’t work on iPhones or iPads. @font-face is a better option.
Fonts in Email
When it comes to email, choices are limited to web safe fonts (and font stacks).
We work mostly with Campaign Monitor, and they have a good article showing how different font stacks can be used: Font Stacks Used in Email
