It used to be that Web designers were limited to a handful of “Web-safe” fonts, which made for predictable, if not boring, websites. Now, high-end typography is within reach of all website owners, making it possible to use nearly any font imaginable.
Still, there are limits to how you can use fonts on your website. Fonts typically take hundreds of hours of work by skilled designers, and they can cost hundreds or even thousands of dollars to buy. Luckily, there are several services available to put high-quality fonts within reach the budgets of most people and organizations.
There are services that charge a small fee for the use of premium fonts specifically tailored for use on the Web. These services include Typekit, WebINK, Webtype, and Fontspring.
We believe in making online friendly, and we think it shouldn’t cost much to make great websites, so we’ve included some free options that provide high-quality fonts. These services are Font Squirrel and Google Web Fonts.
Typekit
Typekit is a popular option for Web designers, offering fonts from some of the best foundries worldwide such as Adobe, FontFont, Mark Simonson, and Veer.
The setup simply involves dropping two lines of JavaScript into the head of your webpage.
Typekit pays careful attention to the quality of font rendering and works closely with font foundries to ensure their fonts are high quality. One of the issues with Typekit, however, is that hinting (extra information that helps browsers produce clear, legible text) is left up to the font foundry. This means that Typekit fonts render quality varies from superb to sub-par. Typekit, however, offers multi-browser previews of every font so you know how your font will behave, without having to do exhaustive (and exhausting) testing on your own.
There’s a free version of Typekit which lets you use two Typekit fonts on one website as long as there are fewer than 25,000 pageviews per month. For more ambitious users, the “Portfolio” package costs $49.99 per year and includes full font library access, unlimited websites, unlimited Fonts per site, and a cap of 500,000 pageviews per month.
Our Experience: We found that Typekit wasn’t cost-effective for our Web design needs. Because it’s a subscription if we stop paying, a client will lose their design.
As a business model it’s not good for us either, because as a professional or enterprise client, we could simply have a junior designer make headlines when needed instead of paying the fees for dynamic text and https support.
That said, Typekit’s subscription model should suit some customers. Part of the subscription fees, after all, go toward making fonts automatically work on new and updated browsers and operating systems as they come out. This saves a company time because they don’t need to do any manual updates or write any code to ensure the fonts continue to work.
WebINK
WebINK lets you put professional-quality fonts on your web site, including many great fonts for smaller text. Its library includes nearly 4,000 fonts from some of the best foundries such as Adobe, Dalton Maag, ParaType, Isacotype, and Optimo.
After a 30-day trial, WebINK is available in various packages starting at $0.99 per month per type drawer (find out what that is), up to the “Premium” package which starts at $2.99 per month. Font usage is also billed according to usage, so a Premium plan can run as high as $59.99 per month with 80GB of bandwidth.
One of the most exciting features of WebINK is its “FontDropper 1000“, which lets you see how Web fonts will look on live webpages. You can use it on any Web page to start start dropping in different fonts.
FontSquirrel
The @font-face method lets you easily use nearly any font using some simple code. @font-face should work on Android, iOS, and all desktop browsers. Because of licensing concerns, however, you cannot simply embed any font you like. Many mainstream foundries now sell fonts with a Web-version license on sites like myfonts.com. But free fonts can also be a great option.
One of the best free font sites is Font Squirrel, an online directory of hand-picked, free, high-quality, commercial-use fonts. It includes hundreds of free fonts, and will even send you to other sites like fontex.org to get them.
Font Squirrel provides @font-face kits containing all the font formats, CSS code, and demo files you need to add fonts to your site. To install Font Squirrel fonts, copy the font files to your server, and add the CSS code to your site’s stylesheet. These fonts
Font-Squirrel also has a utility that lets you create a Web version of a font , whether it’s free or you have the Web license for it.
Font Spring
From its large, searchable marketplace, Font Spring lets you discover and buy specific webfonts. Popular foundaries on Font Spring include FontSite Inc., Typodermic, Canada Type, and Insigne Design.
There are no subscriptions, and, for a small fee, nearly all of the font families offered on Font Spring can be each purchased for unlimited use on websites you control.
Because you download and host the fonts on your own server, there are no pageview limits like there are with Typekit and WebType.
All Fontspring webfonts have been auto-hinted so that they render properly. Unhinted fonts can look jagged or blurry in Windows browsers. To further ensure you know what your font looks like, each font family page has a @font-face demo tab that shows the actual webfont embedded in the page. You can use this to preview in various browsers before you purchase.
WebType
Providing fonts for high-quality online typography, Webtype includes typefaces designed from scratch to look great onscreen.
Unlike many other font services, WebType allows users to search for fonts based on the intended font size to use. For instance, if you’re looking for paragraph text, the font will look better in a small size, and heading font will look better in a larger size. WebType makes it clear which size range each font is intended for.
WebType users start off with a free, one-month trial and can test all Webtype fonts free for 30 days. Then subscriptions start at $40 per year for sites that have fewer than 250,000 pageviews per month.
WebType hosts each font using servers from around the world, and in addition to ensuring quick load time for website visitors, there are many other features that are made possible. WebType provides automatic browser support to make sure that the best font files are served to each viewer depending on which Web browser they use. Updates to Webtype fonts (due to changes in browsers, operating systems, and fonts) are implemented automatically without any extra work on your part.
Google Web Fonts
Google Web Fonts offers hundreds of free, open-source fonts. Since all the fonts are open source, you are free to use them in any way you want, share your favorites with friends and colleagues, and even improve or customize them. Granted, Google Web Fonts has a limited selection of fonts.
Google Web Fonts is among the most simple systems to setup: Once you’ve decided on the font you want to use, Google provides a line of CSS to paste into the head of your website. Google will even let you customize font features such as size, and provide you with a custom code for those changes.
According to some reports, Web Fonts render quite nicely in all the latest browsers, but not as well in older ones, so be sure to check your site in browsers like Internet Explorer 6.
With the many options for different fonts, it’s easy to go overboard and use too many fonts at once. We’re recommend limiting yourself to just two or three well-chosen fonts. Many excellent sites use a fancy title font, and an easy-to-read one for site content.
The decision on what font service to use often boils down to what fonts are available and how good they look in a browser. Some fonts are worth paying a steeper fee. And sometimes you’d rather use a free service and find an equivalent font.
There are now many font options available. You’re no longer stuck with the default fonts such as Arial, Times New Roman, and Georgia. Go out and try some new fonts!
Need help making a favourite font work on your website? Or choosing a font that communicates your brand? Let the experts at Kobayashi Online work with you to find and implement the right typeface!
Nice summary of web fonts options.
I thought your readers would also want to know about Fonts.com web fonts (www.fonts.com) – the company I work for.
It is a subscription web font service with the widest selection of high quality Web fonts – over 12,000 Web fonts from Monotype®, Linotype®, ITC® and other premier type foundries. The service is available in three tiers:
– free
– standard
– professional
Each option provides different features that would appeal to web developers working on small and large websites.
Thanks Bill! (and sorry for the snub!)
Yes, Fonts.com is another great source for Web fonts. It has fonts from notable foundries such as Monotype, Linotype, and ITC, as well as sought-after fonts including Helvetica, Frutiger, and Univers.
You can try Fonts.com out for free under the conditions that you have fewer than 25,000 pageviews per month and that you display a Fonts.com badge on your site. Unlike many other free trials, there are no limitations on how many sites or how many fonts you use. Bonus!
Paid subscriptions start at $10 per month, which gives you more pageviews, and access to a larger font library. For $100 per month, the “Professional” package offers 2.5 million pageviews, and includes the option of self-hosting your fonts.
Just like the other six services we mentioned in this post, take a serious look at Fonts.com as a Web typography service option.