The best way to serve fonts to your website

Web design came of age the day webfonts entered wide-spread usage. Prior to that point it’s arguable that we were less designers than engineers.

However, the enthusiasm with which we’ve grabbed at font options in web design has lead to a bewildering array of choices; so much so that many designers opt for the path of least resistance, allowing the desire for simple implementation to dictate their typography.

If you know what you’re looking for, all of the options are simple. In this article we’ll arm you with the knowledge you need to make informed decisions when choosing between font technology.

We’re going to illustrate these options by focussing on the best way to deliver an all-time classic typeface, Garamond.

Font stacking

Having extolled the virtues of webfonts, the first option we’ll consider uses no webfonts at all. Font stacking is a CSS technique in which you specify a number of fallbacks starting with your first choice and ending with a catch-all solution.

There are lots of font stacking resources online, but one of my favorites is cssfontstack.com, it’s a great starting point for a font stack, but be aware that more often than not you’ll need to bring some expertise to bear.

According to cssfontstack.com Garamond is available as a system font on 49.91% of Macs and 86.47% of Windows machines. That’s pretty good, but not good enough. Here’s the suggested font stack that covers all bases:

font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

The question is, how can we improve this?

Well, we know that there are numerous versions of Garamond available, so we can add in a variation in the second slot as a minor compromise.

Secondly I disagree that either Baskerville or Times are adequate substitutes for Garamond, so let’s drop them. Hoefler Text works well in place of Garamond, so that can stay. We need to add serif as a final catch-all, but as most systems use Times as their default serif, let’s slot in the far superior Georgia for anyone who’s slipping through the cracks.

Our final modified font stack looks like this:

font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;

The majority of viewers are going to see Garamond, a few others will see a reasonable compromise and a tiny minority will just get their default serif font.

Pros & Cons

Font stacking is free, by far the fastest solution, and depending on your chosen typeface can be very effective; in the case of Garamond there’s a good argument for calling this ‘job done’.

There is however, one major problem with font stacking, especially with a typeface like Garamond: there are so many pirate versions in circulation that it’s impossible to know which font is named “Garamond” on the user’s system, not only can we not be sure the design is consistent with our expectations, the scale of the font may be radically different from the version in our design. (Technically, there’s nothing preventing a copy of Arial being renamed “Garamond”, in which case our font stack would use that.)

Font stacking is therefore a superb back-up, and should be considered for use in conjunction with all of the solutions below, but it’s less than ideal as a primary solution.

Google Fonts

Google Fonts is, for many designers, the point at which they end their search. For a grand total of $0 you can easily load webfonts into your site using CSS.

The only downside is that the number of typefaces on offer is extremely limited. Typefaces such as Roboto and PT Sans owe their popularity as much to their free availability on Google Fonts, as to their design qualities.

Currently, the only variation of Garamond available on Google Fonts is EB Garamond, an attempt to open source the Garamond typeface. But the flaw with this version is that there’s only one weight and style available; there’s no bold or italic. The designer Georg Duffner has generously made his work in progress available on Bitbucket but it’s not production ready.

Pros & Cons

Google Fonts is a great budget solution and ideal for situations where you may be footing the bill rather than your client. Being able to specify your fonts in CSS is as simple as can be.

The big flaw with Google Fonts is that despite their marketing, there’s very little choice. If you’re looking for a webfont of Open Sans then you’re in the right place, but if you want a font like Garamond—which is hardly obscure—it’s a wash-out.

Self-hosting

Self-hosting is a hugely underappreciated approach to webfonts. Its key attraction is the ability to subset fonts, an option so attractive almost all streaming services attempt to emulate it.

If you have a desktop copy of Garamond on your system, open it up and you’ll see a bewildering number of characters. Subsetting a font is the process of deleting non-essential characters resulting in a smaller file size and speedier delivery.

Of course, the characters you require will depend on the site you’re building: if you’re building a tourist guide to Dubrovnik you’ll probably need Serbian Cyrillic characters; if you’re reproducing the collected works of Shakespeare it’s unlikely you’ll need an @ symbol.

In order to subset a font, you’ll need font editing software. There are many options available from the free FontForge to the premium FontLab Studio. To produce a subset version of the font, simply select a glyph you don’t want, and delete it, then save the file into your project folder. (Be careful not to overwrite your original font file!)

The full .ttf file for Adobe Garamond Pro is 606Kb. Stripping it down to basic latin characters and punctuation reduces it to 56Kb. Multiply that across several weights and styles and you’re saving a couple of Mb in downloads for your users.

Self-hosting desktop fonts

Most font files you have installed will be TrueType (.ttf) with a smattering of OpenType (.otf). You can save these to your server and specify them in your CSS.

Support for .ttf and .otf file formats is widespread across all modern browsers except IE (even the latest version) and some mobile browsers (including legacy versions of iOS Safari).

To increase your coverage you’ll need several additional formats. .eot works for IE, .woff will work for most browsers and is the W3C’s preferred format, .svg will work on legacy browsers. There’s a number of web services that will generate these formats for you from your .ttf file, one of the most popular being Font Squirrel’s.

The downside with converting desktop fonts for use online is twofold: firstly, you are almost certainly not licensed to do so; and secondly, desktop fonts are almost always optimized for print, they simply do not render well on screen.

Self-hosting webfonts

Font foundries have finally woken up to the fact that there is a huge market for webfonts. As a result they have not only tightened up their licensing, but they’re working towards optimizing their back-catalogs for screens.

Foundries supplying dedicated webfonts provide all the required formats, quality-checked and ready for upload to your server. What’s more you’re still free to subset a file, and you’re not dependent on a third party server’s uptime.

There are numerous places you can purchase webfonts, two of the key players in the field are FontShop.com and MyFonts.com.

Returning to our Garamond quandary, we can see that MyFonts have a number of different versions of Garamond on offer. We can license Adobe Garamond in several weights, restricted to 250,000 pageviews, for around $180.

FontShop also have a number of webfont versions of Garamond available. URW Garamond Web provides every weight and style we could possibly want, all with a generous 500,000 pageviews per month. What’s more, FontShop have a dedicated subsetter to optimize your shiny new font purchases. Unfortunately you pay a premium for all this, around $680 for the full font family.

Pros and Cons

Self-hosting enables subsetting. It ensures you stay in control of your font delivery, and avoids any kind of dependency on third party servers.

What’s more, if you’re purchasing a professional webfont you can expect the quality to be extremely high.

Self-hosting also appeals to those of us who prefer to “own” our fonts rather than renting them. Of course, in legal terms there’s very little ownership at all, but a one-off fee sits more comfortably that a subscription for many people.

The only downside of self-hosting is the substantial price. Not only will you need to pay for the font, but you may need to factor hosting and bandwidth costs into your figures.

Webfont services

Just like Google Fonts, webfont services deliver fonts to our browsers via simple CSS. Unlike Google Fonts, there’s a huge range to choose from.

There are a number of different vendors to choose from, and I particularly like Hoefler & Frere-Jones’ cloud.typography service. However, as with many smaller vendors, their usefulness is entirely dependent on the availability of the typeface you’re looking for. The closest font Hoefler & Frere-Jones can supply is Hoefler Text, however if we’re paying a premium we shouldn’t need to compromise.

The largest player in webfont streaming is Adobe Typekit. The quality of their fonts is very high, the implementation is simple, and most importantly they have a huge catalogue to choose from.

Typekit provides a range of subscriptions ranging from $24.99 per year for 50,000 views per month, to $99.99 per year for 1,000,000 views per month. However, if you’re a Creative Cloud member the Portfolio Plan is included in your subscription; meaning that for most web designers Typekit is a free solution.

A quick search tells us that there are several versions of Garamond, including Adobe’s own, available on Typekit. And, there is also a very limited subsetting feature that allows us to reduce the file size a little.

Pros and Cons

Webfont streaming services provide a large varierty of excellent quality fonts, that are easy to add to your site.

In the case of Typekit, if you’re already a Creative Cloud member, then free access makes this an even more appealing option. However, if you’re not a member then you’re facing a choice between paying a substantial subscription and tying yourself to Adobe.

My principle concern with any streaming service is that you are entirely dependent on a third party server’s performance. If their server goes down, so does a substantial part of your branding.

Which is the right choice?

As with so many things, the answer is: it depends on your project. But there are some decisions that we can make based on our Garamond test:

Font stacking is a no-cost backup, it provides an on-brand solution if and when font files go missing or streaming services run slow. It should always be implemented on any site, but relying on it, even for something as common as Garamond is potentially hazardous.

If the font you’re looking for is available to stream for free, either via Google Fonts, or for example if you have a Creative Cloud subscription, then this is a good choice. As I have a Creative Cloud subscription I would be tempted down this route, although the lack of real subsetting would be a concern.

If you have the budget, then self-hosting a professional webfont is the best choice. The relatively modest cost—when compared to stock photography—is easily justified by the huge speed boost subsetting delivers.

In an industry where we’re minifying JavaScript files to save a few Kb, shaving hundreds of times that amount from a single file is a no-brainer.

Featured image/thumbnail, download image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.