5 of the Best CSS3 Font Tools

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…

1. Google Web 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 link tag, CSS @import declaration or JavaScript snippet. Google highlights potential download speed issues but, since you can use their CDN, there’s little need to worry about hosting.

Did I mention that it’s all free? Google Web Fonts will satisfy the most demanding designer.

2. Font Squirrel

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.

4. FFFFallback

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.

5. WhatFont

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

Hungry for more? If you have the time and inclination, FontStruct and Bitfontmaker allow you to create your own fonts. Both offer a range of free fonts created by talented artists.

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?