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.
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.
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.
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.
- almost unlimited choice of fonts
- 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
- 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
- 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.
- choice between loading from Google’s servers (fast) or your own
- lots of choice
- open source
- SSL is supported
- 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
- at one point, these were really the only viable way to use many fonts online
- 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
- the font files and code from your provider or
- 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.
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.
[gravityform id=”1″ name=”Contact Form” title=”false” description=”false”]