Web fonts for WordPress

Fonts control how your text is displayed – how the letters actually look. By default, websites can only display text using fonts that are installed on a website visitor’s computer. Because of the number of different operating systems and versions and the way fonts are licensed, there aren’t actually many truly web-safe fonts – i.e. installed on practically everyone’s computer. So, most websites use these standard fonts. One way to make a website stand out is to introduce more exotic fonts.

With WordPress, as with any website, there are a number of ways to achieve this. In this article, we’ll look at a few different techniques and cover their respective pros and cons. We’ll also tell you which solution we recommend and what we’ll need from you if you want us to include non-web-safe fonts on your site. It’s important that any web font requirements are included clearly in any proposal we agree with you – our default position is not to include support for web fonts.

Trying to decide between hiring an agency, a freelancer, or an in-house team? Our guide on Agency, Freelancer, or Hire explores the pros and cons of each option, helping you make the best decision for your business.

What about fonts in graphics?

This article only applies to ‘live text’ that needs to be editable through the CMS and machine-readable on the website. If you are simply looking to create a graphic that includes text, you can use whatever fonts you have a desktop license for.

How does WordPress make it easy to work with web fonts?

Although these techniques can be employed on nearly any website, WordPress makes it easy. Commercial themes often come with custom fonts pre-loaded and available to you. Many web font providers have plugins available to make it very simple to integrate their fonts. Often, themes or plugins will give you point and click configuration options to set site-wide or per-page font settings – no development necessary! This reduces development costs and leaves font control in your hands even if you can’t write a line of code.

Techniques

Not all web font techniques are created equal – some cost money, slow down page load, cause a momentary delay before text is displayed or won’t display on older browsers. For each of the techniques below, we’ll cover how it works, then highlight the pros and cons.

Native @font-face

This is a CSS (stylesheet) technique that loads actual font files into the visitor’s browser. These font files can be loaded from a remote server, or directly from your own website server. It can be used with either paid or free fonts and is the actual mechanism by which many commercial and cloud web font services work, although the implementation varies wildly from provider to provider. Services like Font Squirrel will help you find and generate the code you need.

Pros

• almost unlimited choice of fonts
• self-reliance

Cons

• doesn’t work on all browsers
• different browsers need different font files
• can cause page load slowdown
• no pageview/bandwith limits

For more information, see the W3schools @font-face page.

3rd party service integration

These are commercial font providers such as Fonts.com, FontDeck and Typekit and offer their own font libraries and integration techniques using CSS or JavaScript. Each service varies in cost, implementation technique and various other factors but choice is usually driven by the font you want to use, so after that it’s a case of working out how to get the best results with that font’s provider.

Pros

• wide range of professional fonts available
• fonts are optimised for web
• there’s generally a wider range of font weights and variants
• tiered pricing
• often doesn’t noticeably slow down page load because of global, distributed delivery infrastructure
• support is often available direct from the vendor

Cons

• usually costs money
• you may need separate licenses for desktop versions
• your site’s optimal display now relies on a 3rd party service (although some providers offer self-host options
• there’s sometimes a FOUC (Flash Of Unstyled Content) where you see the original text (although there is often a fix for this), or a delay in the font loading
• usually have to learn how to use the provider’s on-site control panel e.g. TypeKit’s kit editor

Google Web Fonts (our recommended solution)

This is a collection of free, open-source web fonts provided by Google, very similar to the Typekit/Fonts.com service.

Pros

• choice between loading from Google’s servers (fast) or your own
• lots of choice
• open source
• free
• SSL is supported

Cons

• serving certain fonts from Google’s servers doesn’t work in some versions of Internet Explorer
• fewer font weight and style variations
• some fonts aren’t very complete or aren’t 100% web-optimised
• no official support help, just online documentation and forums (like any free Google product)
• no pageview/bandwith limits

Font replacement

These techniques, such as Cufon and sIFR are used less frequently now that other web font techniques are in place, but they really drove the increased availability of web fonts. These systems use JavaScript or Flash to hide the live text and replace it with text drawn by code.

Pros

• at one point, these were really the only viable way to use many fonts online

Cons

• involves loading 3rd party libraries as well as font files, so it’s slower
• there’s often a FOUC (Flash Of Unstyled Content) where you see the original text before the replacement kicks in (although there is a fix for this too)
• as Flash, sIFR won’t work on Apple’s iOS – i.e. iPhone, iPad, or other devices that don’t have flash installed

What we’ll need from you

1. the font files and code from your provider or
2. access to your font provider’s control panel so we can get the code ourselves

If there is a fee to pay, that’s up to you to organise (both now and ongoing). Let us know if there’s anything we can do to help.

Conclusion

Using non-standard fonts is a great way to make your website stand out from others. There are a number of different techniques that can be used to employ non-web-safe fonts on websites, WordPress sites included. At Pragmatic, we’d recommend using Google Web Fonts because it’s a win for free, open source software and there’s a good range of quality web fonts.

If you’d like us to implement web fonts as part of your new or existing WordPress project, just ask using the form below, or contact us however’s most convenient.