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 @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.
[...] Then a couple of days later, this article, ‘Opera loves my web font‘ showed up in my feedreader… Read part 2 of this post: FontSquirrel.com saves @font-face. [...]
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.
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.
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.
[...] ‘Opera loves my web font‘ showed up in my feedreader… Read part 2 of this post: FontSquirrel.com saves @font-face.Posted in Design | Tagged @font-face, typekit, typographyOne Response Fontsquirrel.com saves [...]