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…

Google Web Fonts screenshot1. 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.

Font Squirrel screenshot2. 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.

Font Dragr screenshot3. 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.

FFFFallback screenshot4. 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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://profiles.google.com/axel.miller98 Alex Miller

    I’ve used font squirrel before and it is amazing. I had no idea Google had a web font but it doesn’t surprise me. Great post thanks Craig!

  • http://www.itmitica.com/en IT Mitică

    3 and 4 I didn’t know of.

    I think a thank you is in order :)

  • http://twitter.com/ReignStudio Ryan Lee

    Thank you! This is great!

  • http://askbez.com Johannes Bez

    Agreed that this is fantastic! Numbers 3 and 4 are completely new to me. This is extremely useful stuff to know.

  • http://www.nintera.com/ Daniel Nordstrom

    Haven’t tried any of the ones mentioned here (probably will soon though), but I agree that TypeKit is very nice. And it is actually free, or at least it was when I used it, if you agreed to display a small logo at the bottom of your site. :)

    Worth a mention!

  • Anonymous

    Too bad Google Web Fonts are entirely unreliable. I used it on a big-ish project not long after it was introduced. Two weeks after launch, the entire site was suddenly in boldface. Turned out someone had checked in an updated version of the font with broken metadata and it immediately went live. 24 hours later it still wasn’t fixed so I had to redo all the type in a hurry. Two weeks later, the thread about was closed and marked as resolved without it actually being resolved. Could still be that way as far as I know. It’s made me gunshy about using any Google service in a production environment.

    Google’s greatest strength is it’s greatest weakness—if someone has an idea, they can just put something together and make it happen. But then when the originator of the idea gets bored with it, the project gets completely abandoned and users have no choice but to just take it or not use Google’s products.

    • http://floppydeuce.com Smola

      Valid point, but when using a font service like GWF (or ideally in all projects), you should ALWAYS have a similar font as a backup in your stack. Depending on how organized your css is, deleting the reference to the primary font wouldn’t take much time at all.

      I must say for those reading this thread that I have used GWF on the majority of my projects and haven’t encountered any inconsistency issues like the one you had. I am thoroughly satisfied with the service!

  • http://pulse.yahoo.com/_2PDC4PHGIVKCHPG3TLP6I3DTQA Anonymous

    Thank you. Big help!

  • http://twitter.com/Keiron_Lowe Keiron Lowe

    I’m pretty sure @font-face isn’t CSS3, I believe it was supported by IE5.5, just only in the EOT format.

  • Anonymous

    Cool!