Note: This post is a continutation of Sorry Typekit, you’re unusable (for now).
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
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 22.214.171.124+
- 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.