Using Beautiful Fonts with WordPress

WordPress makes it possible to use a wide range of beautiful, licensed fonts on your website.

OM4 develops business websites using WordPress, so we’ve had a lot of experience integrating and using fonts. We’ve published this page to help make it easy for you to find and use beautiful fonts on your own site.

Desktop vs Web Fonts

Most fonts have different licenses for desktop and web use. Just because you can use a font on your computer doesn’t mean you are licensed to use it on your website.

If there is a specific font you want to use on the web, search for the font name and ‘webfont’ – that will tell you if it is available or not. Don’t be surprised if it isn’t – not all font designers make their fonts available via a web license. If they don’t, you can always drop them a line and suggest they do.

If there isn’t a web licence, well, find an alternative font.

Sources of Web Fonts

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.

Option Choices Costs Link
Typekit Any Typekit font. Typekit pricing TypeKit
Adobe® Edge Web Fonts Any Adobe® Edge Web font. Free Adobe® Edge Web Fonts
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
Cloud Typography Fonts from Hoefler & Co Starts at $99/yr Cloud.Typography
Web Safe Any web safe font Free Web safe

Some of these options may require some technical integration.

More about Typekit or other @font-face based services

TypekitTypekit 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

Back in the olden days, before font-face, choosing a Web Safe font meant using a font that is already installed on just about all computers using the web. 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.

So if you don’t want to do anything fancy, choose one of these fonts and your website will work just fine.

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

Sometimes, before @font-face was viable, an image replacement approach was used for fonts – prepare an image file for each heading, and upload/display. This is time intensive, and makes it harder to add new content to your website. Really, now that @font-face is here, it isn’t necessary at all.

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. And the licensing framework for these approaches isn’t exactly clear. @font-face is a better option, so no need for these anymore.

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