Using Fonts on Your WebsiteOctober 28, 2016
Unlike the old days of the Internet, when we were constrained to using a small handful of fonts on every website, we now have hundreds of different fonts at our disposal. But it’s not always clear how it works, what it costs, and what choices do you have. Let’s do some review.
Using Webfonts: The Old Way
In the past, to have a custom font on a website, the end user had to already have that font installed on their computer. After all, if someone could simply share fonts via their website with end users, who would ever pay for them? And what about copyright laws? People could just give away fonts for free.
The original font stack of websites centered arounds fonts we could safely assume most users already had on their computers, such as Helvetica, Arial, Courier and Times. While many users may own a font like Frutiger, many more did not. It was ‘use at your own risk.’ You could list a font in your style sheet (CSS), and if a user had it active, they would get a web page with a custom font. If not, the next font in the list could be used, or whatever default fonts your browser used.
When Microsoft started including some new “core fonts for the Internet” way back in 1996, web builders could start including (then) exotic fonts such as Verdana, Georgia, and Trebuchet (with fallbacks for those who didn’t use Windows products). These included some nicely-designed-for-the-screen font stacks still commonly used today.
Problems to Avoid
Having hundreds of webfonts available is great. You can finally have your printed materials and company fonts match what’s online. Using real text on the page versus images with text, or other tricks, means your content is accessible and responsive. It can adapt to different screen sizes and be fully indexed by search engines. But there are a few downsides to keep in mind.
Not every font choice is a good one
Just because you can, doesn’t mean you should. Not every free webfont is good. That’s probably not surprising, knowing our collective history of widely used bad fonts (looking at you, Comic Sans). You need to exercise caution and good taste. And rely on knowledgeable graphic designers for help. If you don’t have direct access to these fine people, there are some good online resources to turn to for advice.
Websites such as Typ.io, Typewolf, and Typographica offer examples and reviews of good online font usage. Typecast lets users freely test drive webfonts in their browser, as well as offering some advice on recommended fonts (editor’s choice).
Site performance is another major concern with webfonts. Despite the conventional wisdom that everyone now has fast broadband connections, the reality is still that every byte counts.
Webfonts can quickly add to page weight and slow down your load speed. Be careful to only include as few webfonts as needed (one or two max is a good rule of thumb). Within each font stack, you’ll have the choice to include as few or as many of the variations as possible (italics, bold, extra-bold, heavy, caps, etc.). Websites in multiple languages will require a lot more special characters in a webfont stack. Try to restrict your webfonts to only what you need, such as one regular weight and one bold. If you don’t anticipate needing italics in your headlines, save some filesize and don’t include it.
The Final Word
Despite performance and aesthetic concerns, we recommend using custom webfonts whenever possible (with proper restraint). Good typography and well-chosen font families accentuate your content and contribute to your brand. We've suffered at the hands of Arial and Helvetica for too many years. Let's continue to explore and be creative with your site!