Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans).
While there’s nothing wrong with standard font stacks, they can become a little monotonous. Internet Explorer has supported web fonts for more than a decade but it’s taken competing browsers a little longer to catch up. Licensing is still an issue — you can’t use any commercial font — but you should be able to find one which permits web usage or is similar to your corporate style.
However, with great choice comes great responsibility. Fortunately, there are several online tools which can help you locate and use CSS3 fonts…
If you’ve not visited Google Web Fonts, where have you been? Google provides more than 200 fonts and the review tools are amazing.
You can download any font file but the tool also allows developers to import via an HTML
Did I mention that it’s all free? Google Web Fonts will satisfy the most demanding designer.
Font Squirrel is excellent — especially if you’re nervous about handing all font responsibilities to Google. The site provides hundreds of quality fonts which are free for commercial use. You can download TTF, EOT, WOFF and SVG font files as well as @font-face kits which provide bulletproof code and samples which work in all major browsers.
Still not satisfied? Upload a licensed font file to the @font-face generator; it’ll be handed back in multiple web formats with sample CSS code. How much would you pay for that service? It won’t cost you a penny.
3. Font Dragr<
Just because a font can be used on the web, it doesn’t mean it should. Fonts such as Helvetica and Georgia were designed to work well on-screen but not all fonts are created equal — especially at small sizes.
Therefore, you should test that medieval script font before adding it to your page. Font Dragr makes it easy — drag a font file to the page and the text will magically change.
Not all users will be able to experience your beautiful fonts. Those with older browsers may not support web fonts and there are strong reasons why you should avoid them on mobile devices.
Fortunately, CSS supports fallback font stacks: typefaces are tried in order until one is found. However, fonts have different sizes and spacing so a particular fallback could break your design.
FFFFallback.com is a fantastic bookmarklet which shows how your site looks with different fonts. It overlays a duplicate of your page on top of the original so you can instantly spot formatting issues.
If you’ve spotted a lovely font in the wild, WhatFont is another bookmarklet which will help you identify the typeface and size. Launch the tool then hover over or click any element. What could be simpler?
Bonus Font Tools
Font Matrix and Common fonts list the major typefaces and alternative fallbacks on Windows and Mac. Always check these first — there’s no need to use a web font if it’s universally available on most platforms.
Do you know of any other great font tools?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.