@font-face at-rule is one of the most anticipated feature in CSS3, it allow you to define custom font for your website, allowing you to upload fonts to your web server and deliver the font itself to the client browser
Typekit is a web service that provide fonts & the font delivery service for this use, the huge benefit of using Typekit is that you dont have to think about the font license that you’re going to use and the bandwidth that the font are going take, Typekit will take care of that. But lets get to the point on how to use it on your thematic child themes,
After signing in (currently on invitation only), you’re asked about the name and the address of your website (you can use localhost for testing environment) then you’re asked to add snippet code to your html head tag like this
to use it on your thematic child theme use this code at functions.php
1 2 3 4 5
(change the XXXX or change all the snippet code)
What this code does is put the script at your head tag. Easy right? if you want to know more about thematic you could visit Thematic Framework.
About Typekit, I was a late invitation on Typekit, i’ve notice on twitter that every body got the invitation since first august but i just get the invitation yesterday. My experience using typekit? it’s downright easy, u could automatically add font stack on the Typekit Editor in case the client browser doesn’t support @font-face.
after testing in localhost environment this is the screenshot of Typekit in action
This is good-dog font, using h1 selector with letter-spacing -1
Typekit comes in two version, the free and the pay version, the free version you’ll get less choice of font and you’ll get typekit badge while using it. There are 3 pay version scaling up the number fonts, bandwidth use & features.
Right now i’m using the free version, i haven’t thought in upgrading my account, because right now i dont have any plans on what i’m going to use it for.