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. Due to the number of different operating systems and versions, and the way fonts are licensed, there aren’t many truly web-safe fonts – i.e. that are installed on virtually everyone’s computer. So most websites use standard fonts. One way to make a website stand out is to introduce more unique 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 go over their respective pros and cons. We’ll also tell you which solution we recommend and what we 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 clearly included in any proposal agreed with you – our default position is not to include web font support.
What about fonts in graphics?
This article only applies to ‘live text’ which needs to be editable via the content system and machine readable on the website. If you want to create graphics that include text, you can use the fonts you have a licence for.
How does WordPress make it easy to work with web fonts?
While these techniques can be used on almost any website, WordPress makes it easy. Commercial themes often come with custom fonts that are pre-installed and available for you to use freely. Many web font providers have extensions available to make it very easy to integrate their fonts. Often, themes or extensions give you easy configuration options to set all the settings of the fonts for all the different parts of the website – no coding required! This reduces development costs and leaves font control in your hands even if you can’t write a line of code.
Technologies
All technologies work in different ways, some cost money, slow down loading times, create a temporary delay before text is displayed or cannot be displayed in older browsers. Below we go through each of these techniques and highlight the pros and cons
Native @font-face
This is a CSS (style sheet) 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 web server. It can be used with either paid or free fonts and is the de facto mechanism by which many commercial and cloud-based web font services work, although implementation varies from provider to provider. Services like Font Squirrel help you find and generate the code you need.
Advantages
- Almost unlimited choice of fonts
- Independence
Disadvantages
- Does not work in all browsers
- Different browsers need different font files
- May cause slower page loading
- No page view/bandwidth limitations
For more information, see W3schools @font-face.
Integration via third parties
These are commercial font providers such as Fonts.com and Adobe Fonts offer their own font libraries and integration techniques with CSS or JavaScript. Each service varies in cost, implementation techniques, and various other factors, but the choice is usually driven by the font you want to use, so after that it’s a matter of figuring out how to get the best results with that font provider.
Advantages
- Wide range of professional fonts available
- Fonts are optimised for the web
- There is generally a wider range of font weights and variants
- Tiered pricing
- Does not noticeably slow down page loading thanks to a globally distributed delivery infrastructure
- Support is often available directly from the supplier
Disadvantages
- Tends to cost money
- You may need separate licences for different types of use
- Your site’s optimal display now relies on a third-party service (although some providers offer self-hosted options)
- There’s sometimes a FOUC (Flash Of Unstyled Content) where you see the original text style (although there’s often a fix for this), or a delay in font loading
- You usually need to learn how to use the provider’s control panel e.g. TypeKits editor
Google Web Fonts (our recommended solution)
This is a collection of free, open-source web fonts provided by Google, similar to services like Typekit/Fonts.com.
Advantages
- Choice between loading from Google’s servers (fast) or your own
- Lots of choice
- Open source
- Free of charge
- SSL support
Disadvantages
- Displaying some fonts from Google servers doesn’t work in some versions of Internet Explorer
- Fewer font weights and style variations
- Some fonts are not complete or are not 100% web-optimised
- No official support, only online documentation and forums (just like any other free Google product)
- No page view/bandwidth limitations
Replacement fonts
These technologies, such as Cufon and sIFR, are less commonly (never) used now that other web font technologies exist, but they fuelled the increased availability of web fonts. These systems use JavaScript or Flash to hide the original text and replace it with text drawn with code.
Advantages
- At one point, these were the only viable way to use custom fonts online
Disadvantages
- Involves loading 3rd party libraries as well as font files, in other words it is slower
- It often causes a FOUC (Flash Of Unstyled Content) where you see the original text before the replacement is initiated (although there is a fix for this too)
- Flash is no longer used, sIFR is no longer a viable option
What we need from you
- The font files and code from your provider or
- Access to your font provider’s control panel so we can generate the code
If there is a licence fee to pay, it is up to you to organise (both now and on an ongoing basis). Let us know if there is 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 use non-web safe fonts on websites, including WordPress sites. At Angry Creative, we recommend using Google Web Fonts as it’s a win for free and open-source software and there’s a good range of high-quality web fonts available.
If you would like us to implement web fonts as part of your new or existing WordPress project, contact us today.