Fontsquirrel.com saves @font-face

Note: This post is a continutation of Sorry Typekit, you’re unusable (for now).

fontsquirrel.com logo

With the launch of the new spigotdesign.com site I was very excited about the possibilities of using @font-face to spice up the typography on the site. Typekit was to be my weapon of choice here but it turns out that it’s still unusable (for now).

Dejected, I went back to the old web-safe font stack and resigned myself to be ok with it. Then one fine day,  this article, Opera loves my webfont showed up in my feedreader, which pointed me to www.fontsquirrel.com as a way of rolling your own @font-face stacks.

FontSquirrel claims to offer “Only the best commercial-use free fonts” in an “easy to use format.” They’ve gathered what they feel are the best free fonts out there that have been licensed for use commercially on the web, and packaged them up into ‘@font-face kits.’

Each @font-face font kit come with:

  • Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts for Internet Explorer 4+
  • Demo.html and stylesheet.css so you can get going fast

As great as the font kits are, the highlight of the site for me is the @font-face Generator, which allows you to upload your own fonts (provided they are properly licensed) and the system will generate a full kit, complete with all the web fonts you’ll need and the css code. Upload the fonts to your server, place the code into your stylesheet, and away you go!

Cross browser/OS font rendering

The real test is how well the fonts render across browsers and operating systems. I’m very happy to say that the fonts FontSquirrel generates render beautifully in every browser I’ve tested. And that was that, I was a FontSquirrel convert.

What do you think?

These fonts render great on every system I’ve tested, but I’m still interested in what you think. Do the fonts on this site render ok for you? If not I’d love to see a screenshot and a rundown of the system you’re using.

5 Comments


Thanks for the writeup. Your fonts look great. As for Typekit, the reason why a lot of the fonts look bad is that they leave the hinting up to the designer. They do not prepare the fonts in any way for delivery to Windows. Font Squirrel does its very best to hint the fonts and make them workable in Windows. Rendering will only get better as time goes on.

Reply

    Thanks for stopping by Ethan, and thanks for the work you do with FontSquirrel.

    I didn\’t feel savvy enough to mess with the font hinting controls, but it looks like the \’Easy\’ option works just fine.

    I\’m heading back over to the site to donate now.

    Reply

FontSquirrel’s @font-face generator really saves the day! However, I feel that the @font-face fonts are best left for headings and titles, and shouldn’t be used for the main content. Doesn’t look right.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.