Since the general public began using the internet in the 1990s, web designers and site owners alike have been frustrated by the limited number of typefaces available to them when creating websites. Despite the fact that most computer users have a multitude of fonts installed on their machines, the selection of typefaces from machine to machine varies greatly. A visitor to your website can only see the fonts you choose for your website if 1. they have those fonts installed on their local computer or 2. you embed the fonts into your site.
Some fonts are considered “web safe”, which means the vast majority of visitors to your site have the font on their local computers; therefore, these fonts can be used without any embedding. They are:
- Arial
- Arial Black
- Comic Sans MS
- Courier
- Georgia
- Impact
- Times New Roman
- Verdana
“Wait! Our brand’s font isn’t on that list!” All is not lost. Font embedding makes it possible.
Cufón
Cufón is a font embedding technology which uses Javascript. It is a free, fast, and widely compatible solution. Best of all, it is easy to generate Cufón fonts from the font files on your computer, and free extensions to easily integrate Cufón into your Joomla or WordPress site are available. Although possible, it is not recommended to use Cufón for body text as it may result in slower site performance. Using Cufón for headlines and small blocks of text will not significantly increase load time.
| Pros | Cons |
|---|---|
| Easily convert your fonts (here) | Slightly slower than @font-face method |
| Compatible with all modern browsers | Not recommended for body text |
| Compatible with most mobile devices |
CSS3 @font-face
The @font-face method works in all modern browsers without the use of any external scripts; it is even compatible with Internet Explorer all the way back to version 5. As it is native technology, the @font-face method can be used for body text, however the output can sometimes look pixelated on some Windows browsers, especially at smaller font sizes. Larger, bolder type typically looks good on all browsers. @font-face can easily be used with Joomla and WordPress, as well as standard HTML sites. TrueType (.TTF) or OpenType (.OTF) fonts can be used right out of the box, however for Internet Explorer compatibility, you must also create an .EOF version, which you can do for free.
| Pros | Cons |
|---|---|
| Easily convert your fonts (here) | Smaller text sometimes looks pixelated |
| Compatible with all modern browsers | |
| Compatible with most mobile devices |
A Note About Licensing
The fact that you have a font installed on your computer does not necessarily mean you have the right to use it as an embedded font on your website. Always carefully read the license for the font(s) you are considering using, and check with the publisher if you are unsure. Font Squirrel offers a large selection of free fonts which do not have restrictions on web embedding.
If you need help utilizing your brand’s fonts on your company’s website, contact Regal Creative. We’ve helped businesses big and small keep a consistent brand via embedded web typography, and we’d love to do the same for your company.
316 N. Milwaukee St.
