How to Add Typekit to your Thematic Child Themes

@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

1
2
<script type="text/javascript" src="http://use.typekit.com/XXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

to use it on your thematic child theme use this code at functions.php

1
2
3
4
5
function childtheme_typekit() { ?>
<script type="text/javascript" src="http://use.typekit.com/XXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
add_filter('thematic_head_scripts','childtheme_typekit');

(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.

u may also like this :

Bookmark
Permalink.
Post a comment Trackback:
Trackback URL

2 Comments

  1. Cee
    Posted September 10, 2009 at 11:07 am | Permalink

    can kindly share an invite please?
    :)

  2. Posted September 10, 2009 at 11:53 am | Permalink

    I wish i could but there’s no invite system in typekit,
    why don’t you try to submit your mail in the typekit site

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>