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.
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.
Some clever workaround were used over the years to deliver custom webfonts, such as Cufon (Javascript-based) and sIFR (Flash-based), but these were never fully accessible and user-friendly. But there is no reason to use these solutions or restrictions today.
Thanks to CSS3 (@font-face) and JavaScript, along with widespread compatibility in newer web browsers, we could start serving up custom webfonts online without fear of copyright issues. Users now have Google Fonts for many free font choices, while paid services like Typekit offer many of the same popular print fonts used on desktops.
How to Use Webfonts
The typical process involves the selection of webfonts through an online service. Users create an online account, start a new project, add a webfont or two, list what URLs the webfonts will work on, and publish. After a small snippet of code is added to your website, web designers can start including the new webfonts in the site theme. Fonts are loaded from the 3rd party as your webpages load in a browser.
Another, less-common approach is to upload the webfont itself to your web server. This typically assumes the webfont has no copyright protections, and can be safely shared to the general public. Font icons, such as Font Awesome, are frequently served in this manner.
Some of the online services, such as Google Fonts, are free to include anywhere, as long as you know how to ‘call’ to them from your website. Other services charge a monthly fee to have access to their entire font library. Typekit.com averages around $50/year. These don’t include every font you can think of–many well known print fonts are not included. But it’s a great selection to start exploring.
Websites such as Fonts.com and Webtype.com allow users to use their webfonts for a monthly fee. Typically around $10/month, the use of these webfonts are also tied to the traffic of your website. The bigger your audience, the more you’ll pay for a webfont per month. The advantage over a Typekit library is the availability of many more familiar font-families. Another service, MyFonts, offers many webfonts at a one-time fee, rather than as an ongoing cost.
Just because you can, doesn’t mean you should
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
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.
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!
Join the Discussion +