For most of its short history, the world wide web has been limited to just a handful of fonts. If you were building a website you had to worry about what fonts were “web safe.” Basically, that meant that you had to aim for the lowest common denominator of what came installed on users’ computers in Windows or Mac OS. Fonts like Arial. Times New Roman. Verdana. Trebuchet MS. And the dreaded Comic Sans. You could specify whatever fancy font you wanted, but because most visitors wouldn’t have that same font already installed on their computer they’d probably just end up seeing Arial.
But that’s changed–for the better.
Until as recently as a few years ago, it was pretty hard to use custom fonts on the web unless you were willing to go to some effort and use some technical skill to work around the limitations. It’s not that no-one had thought of the idea of web fonts before. It’s that yet again the major players couldn’t agree on a standard.
The other option was that you could cheat and use images. That’s why it was common to see headings and headers that were actually graphics files. They looked pretty, and it was a way to guarantee that it looked the same to every visitor. But it was terrible for SEO, search, and page loading speed. And it was a real pain to create a new graphic file every time you wanted a new heading.
But in the last few years web fonts have surged back. Faster web connections, better CSS standards, the maturing of “the cloud,” and web designers’ willingness to pay for font subscriptions have all combined to open up a whole new world of design possibilities. It’s made the web a much more interesting font landscape.
How to Get Web Fonts Working on Your Wordpress Site
There are basically three broad steps to get up and running with web fonts. For each one, the specifics vary depending on what font source you’ve chosen and the setup of your Wordpress installation.
- Get access to the web fonts you want to use. This is different for each service. Some web font services are free (like Google). Some require a paid subscription (like Adobe Typekit). Others have a one-off license fee. So how you do this first step is going to vary based on which service or method you use.
- Tell the web browser where to find the fonts. This is typically handled with a line or two of code to be inserted into the header of your site’s html. If you’re using a Wordpress theme framework like Genesis or Woothemes, they have built-in options in their settings to add scripts to the header or foot–you can put the code in the appropriate place there. You can also manually insert the code into the post templates, if you prefer. Another option is to use a plugin. Many of them include features beyond just inserting the header code. I’ve included some plugin suggestions below.
- Integrate the web fonts into the CSS of your theme’s style sheet. You need to change the style sheet to reflect the new fonts you want to use. In most cases, it’s as simple as changing something like Arial to Oswald. If you’re not comfortable doing this, some of the Wordpress plugins have built-in features to make it much easier.
Web Font Hosting Services
There are a variety of different ways you can source web fonts ranging form commercial services to hosting them yourself. Here are some of the major ones.
Google Fonts
If you’re new to web fonts, start with Google Fonts. It has quickly become one of the leading web fonts providers. They have a large collection of fonts already and add to it fairly steadily. Some of them are really good. Oswald, Droid Sans, and Sans Open have become web staples.
There are several positives in favor of Google Fonts. It’s one of the easiest ways to use web fonts. It’s free, so you don’t have to worry about monthly subscriptions, page view limits, or other limitations. And Google’s servers are fast and reliable. Basically, it just works.
Quite a lot of Wordpress themes and frameworks now come with support for Google Fonts already built in. So check the documentation for your theme–it might have already saved you a step.
If it’s not already baked into your theme, you have to embed the line of script that’s given to you in the “Use” section when you create a collection in Google fonts.
Wordpress Plugins: Google Web Fonts Customizer also manages the fonts and gives you previews. Google Web Fonts Manager also lets you select the fonts from within the plugin’s settings. FontMeister works with several web font services.
Adobe Typekit
The other web font heavy hitter is Adobe Typekit. It was originally an independent service that was already very impressive. But when Adobe bought them, they added the horde of fonts that Adobe has been amassing over the years.
It’s a subscription service with plans based on the number of page views. You can get a Typekit subscription independently. There’s also the option of bundling it with an Adobe Creative Cloud subscription with programs like Photoshop and Lightroom.
Wordpress Plugins: There are a few plugins available to make Typekit work with Wordpress. A good place to start is Typekit Fonts for Wordpress, which is also compatible with multisite Wordpress setups. Other options include Captain Typekit. FontMeister works with several web font services, including Typekit.
Webtype
Webtype has been around about as long as Typekit and also has an impressive selection of fonts. It’s a subscription service based on monthly page views. It offers a 30-day font trial.
Wordpress Plugins: As far as I know, there are currently no Wordpress plugins that support Webtype. That means you have to find a way to embed the script they provide in the header of your site. Many theme frameworks include that feature.
Hoefler & Co. / Typography.com
Typography.com by the font foundry Hoefler and Co. is much more of a specialist offering. They have nowhere near the number of fonts of Google Web Fonts or Adobe Typekit. But they do have some of the most beautiful fonts. They include perennial favorites like Gotham, Sentinel, and Hoefler Text.
It’s a subscription service based on page views. It’s also more restrictive in how many fonts you can choose. And its simplified subscription choices come at the expense of flexibility. But its fonts are all top tier.
Wordpress Plugins: As far as I know, there are currently no Wordpress plugins that support typography.com. That means you have to find a way to embed the script they provide in the header of your site. Many theme frameworks include that feature.
Fonts.com
Fonts.com is a subscription service based on monthly page views. They offer a free plan for small sites (under 25,000 page views per month) with a promo badge.
Wordpress Plugins: Web Fonts works with Fonts.com as well as Google Fonts.
Self-Hosting @Font-Face Kits
With these options, you download the font kits to your own server and host them there.
Self-hosting gives you more control, but there can be downsides. It can be a bit slower since your site probably can’t compete with the distributed networks around the world that Google and Adobe have (although some sites can).
Another issue is that you need to include multiple different file formats to make it work across browsers (TTF for most browsers except Internet Explorer and iPhone; EOT for Internet Explorer; WOFF, which is a new, compressed emerging standard; and SVG for iPhone/iPad).
And self-hosted @font-face kits can be buggy when displayed on some devices and browsers.
The font I use for headers on this site (Anodyne) is self-hosted.
I’ve not come across any good plugins that support self-hosted @font-face kits yet, but the developers of the Fontmeister plugin have it on their roadmap.
Font Squirrel
Font Squirrel offers both free and licensed fonts. For its licensed fonts, it’s pricing model is a bit different than most of the other web font services listed here. It’s pricing is a one-off license fee that you can use in perpetuity without paying again, but the licenses have page-view limits.
One unique feature of Font Squirrel is that they make available a Web font generator. That doesn’t mean you can just upload any font, though. If you read that unfortunately small text before you upload, it says that:
Yes, the fonts I’m uploading are legally eligible for web embedding. Font Squirrel offers this service in good faith. Please honor the EULAs of your fonts.
That’s important. Font creators, just like photographers and writers and painters and other creatives own the copyright to their creations. Some choose to make them freely available. Others choose to license them. Just because you have a font installed on your computer doesn’t mean you have permission to turn it into a web font.
Wordpress Plugins: FontMeister works with Font Squirrel along with several other web font suppliers.
Fontspring
Fontspring’s pricing is perpetual with a one-off purchase, the price of which is determined by bands of monthly page views. Their tag-line is “Worry-free, perpetual font licensing for everyone.” Some of their offerings overlap with some of the best fonts available elsewhere, so if you’re after Proxima Nova, for instances, but aren’t interested in paying an ongoing subscription with Typekit, this might be a good option to get a la carte.
Wordpress Plugins: As far as I know, there are currently no Wordpress plugins that support Fontspring. That means you have to find a way to embed the script they provide in the header of your site. Many theme frameworks include that feature.
MyFonts
MyFonts offers web fonts along with regular fonts. Their pricing model is also a one-off perpetual license which is determined by bands of monthly page views. Some of their offerings overlap with some of the best fonts available elsewhere, so if you’re after Proxima Nova, for instances, but aren’t interested in paying an ongoing subscription with Typekit, this might be a good option.
Wordpress Plugins: As far as I know, there are currently no Wordpress plugins that support MyFonts. That means you have to find a way to embed the script they provide in the header of your site. Many theme frameworks include that feature.
Things to Watch Out For When Using Web Fonts
I like web fonts a lot, but there are still things to watch out for. Adding web fonts will slow down your page loads a little because web fonts are pulled from the cloud on the fly. It might be only a tiny amount if you’re selective and you have fast servers (especially if you use a CDN). It might be a lot if you go wild with all the options.
Each time a visitor goes to your site for the first time, the web browser is going to pull down the web font files. That can be dozens or hundreds of kilobytes, which isn’t necessarily a lot, but it will affect your page loading speed.
The more fonts you set up, the more data is going to be downloaded. And most fonts come with variations in weights. Some come with optional extra effects and character sets. But if you’re not ever going to use cyrillic characters, why add to the bloat of the font file? Leave it out. The better web font services let you be very specific about which weights and extended character sets to include and will give you instant feedback on how much data your selected fonts take up.
Here are some examples using the effect that selecting which weights and character sets can have on page load speed. These examples use Google Web Fonts. Adobe Typekit has something similar, but it gives you actual filesizes.
This first screenshot shows a basic selection of a font for headlines and a font for the main text. Within each font, only a single style is chosen (top left check boxes). At the bottom left, only the basic character set is selected. As you can see, the Page Load dial at top right is squarely in the green zone.
This second one is the same two fonts but selected all of the available styles as well as the extended character set. The amount of data that has to be download to the browser is much larger, so it’s going to take longer. It’s now in the orange zone.
And this last one is going wild with several fonts and all their available styles and character sets. This is going to have a very bad effect on the speed your site’s pages load.
So choose only what you need and balance your design choices with the practical effect of how much you’re willing to slow down your page loads. There’s no reason you have to use all or nothing. You can choose a single font with a single style for headlines, for example, and just use a regular web-safe font like Helvetica or Georgia for the main text.
