Best practice for web fonts: how to use type online for the best results (and how to test it)

So you’ve investigated web fonts, decided they’re a good thing, and chosen possible typefaces for your next project, but what next? How do you ensure you’ve not made a terrible blunder regarding the service you’re using? How can you minimise potential issues regarding rendering across a range of browsers and platforms? And should you be using web fonts for every piece of text on your sites?

On that last question, designer Laura Kalbag offers a resounding ‘no’: “We shouldn’t be using web fonts for the sake of using web fonts”. She argues we must be “very aware of the impact they have on readability and site performance”. Designer at Dropbox Dan Eden has similar thoughts: “The question of what font to use should not infer exclusion of system defaults.” He explains in any medium, typefaces are “more a consideration of brand stance and presence than a necessary design property” and so “choosing something appropriate sometimes means avoiding explicit choice”.

High performance

But it’s performance Dan seems most concerned by: “From that standpoint alone, system typefaces are excellently suited, yet web fonts can quickly get heavy”. When using too many additional typefaces, Dan suggests you might find yourself dumping an extra 500k or more on users – something he considers “too much of a sacrifice”.

Foolproof senior developer Adrian Osmond agrees: “From a technical perspective, web fonts are safe to use, and are even supported in old browsers, but that doesn’t mean you should go crazy and use loads of them.” He notes it’s commonplace to see sites where text is invisible on a poor connection, only appearing seconds later, due to how some browsers handle web fonts. Workarounds exist, but this isn’t ideal.

However, other designers reckon the time of web fonts has truly arrived. “It’s certainly the default position at Clearleft and other agencies I speak to – you assume you’re going to be using web fonts for pretty much everything,” says Clearleft and Fontdeck co-founder Richard Rutter. He makes an exception for really “high performant sites where performance trumps everything and aesthetics can fall by the wayside”, but argues against the notion of system fonts alone being enough, even for body copy.

“Look at Android. You’ve only got two typefaces to work with – Droid and Roboto,” he says. “There’s no way to distinguish sites if everyone’s using them, and the fonts are quite different from everything shipped with Apple and Windows products. So that’s quite a major compromise, in terms of aesthetics and the consistency of the experience.”

A possible half-way house, suggests typographer and teacher Indra Kupferschmid, is to use web fonts “at least for headings, where the difference from system fonts is the most obvious,” and this is especially so “for any site that wants to reach a design-sensitive audience”. On body copy, she says it “depends on the scope of the site,” but “system fonts can be a reasonable choice in some circumstances –  very heavy traffic, or when you’ve lots of languages and special characters to cover”.

Problem solving

Regardless of whether you take the approach of minimising web fonts or use them for everything, further issues need to be considered and dealt with accordingly, in order for everything to go smoothly. Broadly, these involve costs, code clashes and compatibility.

“Price is obviously important, and you must check whether a service limits page views, and if you can buy more if you need to,” recommends Dan. Subscriptions can also be “a financially-savvy option” if you’re “likely to use many typefaces across different sites” adds Laura.

When choosing a web font service, be mindful of how traffic can affect pricing.

However, if you’re expecting gargantuan traffic (millions of views per month) or very localised visits (geographically), Fresh Tilled Soil lead UX strategist Jason Pamental says you should consider self-hosting: “Your one-time licensing cost for a higher level of traffic might make more sense – although you’ll then lose some of the benefits of web font services, such as them constantly fine-tuning fonts for better rendering on various platforms, and exploring ways to compress and serve typefaces faster.”

Indra notes that rendering can also vary between services and even typefaces – something few designers realise: “Choosing one particular foundry or web font service is no guarantee of excellent rendering throughout. Some providers group their catalogue into fonts suitable for different sizes –  small/body copy or large/display. The latter is usually not manually hinted, and this would not hold up at small sizes.”

In control

To keep things efficient, Laura says it’s important to check the level of control you have over typefaces and to fully understand the available options: “Subsetting can help your fonts load much faster, and you may need to find a font with a wide range of international characters if you want your site to work in different languages. If you’re using a font service’s third-party script, you need to ensure you trust the font service to provide your fonts quickly with little downtime and not use your visitors’ data inappropriately.”

When it comes to code, if the service demands JavaScript for publishing, that “can potentially conflict with other scripts on your site, whereas CSS linking can be faster and more straightforward,” says Monotype director Johnathan Zsittnik. “However, services can do more with JavaScript, such as’s dynamic subsetting that is not possible with other methods.” When self-hosting, Jason says to “be sure you get all four main file formats – TTF, EOT, SVG and WOFF – so you can serve the right font for the right device and browser”.

The key point, though, as Laura advises, is always to “test early and test often”. She says she never buys a font without testing it across multiple devices and operating systems, because you could “spend loads of money on something that looks wonderful on a Retina MacBook before realising it’s unreadable on a PC running Windows XP”.

Richard says he’s amazed how many designers don’t do loads of testing as a matter of course: “Judging by some FontDeck support emails we get about a designer telling us their client’s complained a font doesn’t look the same on their PC as it does on the designer’s Mac, it’s clear some people aren’t testing on Windows at all - let alone dealing with and understanding how rendering works.”

He notes that there’s often nothing inherently incorrect about these variances, but designers and their clients need to be aware of them, lest one or both get a nasty surprise.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...