TypeKit: Removing the Wrapping Paper

Typekit: Removing the Wrapping Paper

Oct 15th in Screencasts by Jeffrey Way

Services like Typekit live and die by how intuitive their products are. A couple weeks ago, I finally received my beta invite to join. For those unfamiliar, Typekit is a service that allows you to use a plethora of fonts on your own site with minimal effort.

This video demonstrates just how easy Typekit is to work with. Rather than being a tutorial per se, this is more akin to removing the wrapping paper for the first time! I literally pressed record with zero knowledge of how to use Typekit. However, as you'll soon see, this service very well might prove to be the number one choice for designers and developers, once it officially launches. I know I'm on board!

PG

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

The Screencast

Other Viewing Options

Example

Thank you, Screencast.com!

Screencast.com
...for providing the hosting for these video tutorials.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    nanochrome October 15th

    Great screencast….. just wished It was a little cheaper and there was a ‘Unlimited’ plan.

    ( Reply )
  2. PG

    Steve Mullen October 15th

    Thanks for posting, I have been too busy to try it out myself.

    ( Reply )
  3. PG

    Shaun October 15th

    Nice run. I just picked up an invite to this and am excited to check it out more.

    ( Reply )
  4. PG

    Iankulov Miodrag October 15th

    Hi Jeffrey, nice tutorial man, can you give me an invite please?

    ( Reply )
  5. PG

    Eric B. October 15th

    Sounds interesting!

    What I would like to know about is: How much of an effect would this have on loading time on pages using this a lot?

    ( Reply )
  6. PG

    Adrian October 15th

    I’d love an invite Jeffrey, thanks for the screen cast!

    ( Reply )
  7. PG

    Jerry Watcher October 15th

    Hey! Can you give me an invite? Thanks dude, if you do choose! Also it looks extremely easy from you and Chris Coyiers preview.

    ( Reply )
  8. PG

    Chris Conger October 15th

    Thanks Jeffrey. It does look cool and intuitive. Send me an invite. Would be grateful.

    ( Reply )
  9. PG

    Jennifer Enciso October 15th

    This looks like something I would love to use on two of my current web projects! Can you believe I’m still using image-replacement on my portfolio site? Gah! If you still have any invitations I’d love to join in on the service.

    Also, your “unwrapping” approach was great; nothing beats a true, live, user test!

    ( Reply )
  10. PG

    Jacob Tyo October 15th

    Pick me for an invite, this service looks amazing! Thanks!

    (@*_*)-@ @-(*_*@)

    twitter: jakester2

    ( Reply )
  11. PG

    Dan October 15th

    Hmmm… Not sure I’m sold. I don’t really like the idea that the look and feel of my website would be dependent on a third party.

    ( Reply )
  12. PG

    begs October 15th

    Hi Jeffrey,
    very nice screencast, espacially to see your approach to “new lands” ;)

    ( Reply )
  13. PG

    Bennie Mosher October 15th

    Thanks for this tutorial Jeffrey, seems to be pretty straight forward.

    I tried this two nights ago actually, and was impressed with the ease, but unimpressed with the fact that you can not upload your own font. If you do sign up for a paid account, can you please document with another screen cast, or just a type up, of any new features?

    I am curious to know with the upgraded accounts what you get besides their full portfolio. How many fonts are in the full portfolio?

    Very interested with the upgraded accounts before I purchase. I would appreciate your opinion.

    Thank you!

    ( Reply )
  14. PG

    Tim October 15th

    Hi Jeffrey, I’d like one of those invites, please.

    ( Reply )
  15. PG

    Pontiac October 16th

    Really nice Screencast! Its good to see some easy alternatives to SiFR, CUFÓN and all of this services. I’m sure thats only matter of time to get this little thigs fixed.

    Would love to get an invite! ^^

    ( Reply )
  16. PG

    vasil October 16th

    Good Stuff.

    ( Reply )
  17. PG

    Ryan October 16th

    Nice screencast, just wondering if the Advertisement in the bottom right comes with all versions – might Purchase a copy :)

    Thanks,
    Ryan.

    ( Reply )
    1. PG

      Gavin October 16th

      The advert is dropped on the full version.

      ( Reply )
  18. PG

    Garry Aylott October 16th

    Hi Jeffrey,

    Great screencast, as usual. Like the way your going through something new and sharing with us.

    P.S. How do you get that nice clouds background on your Gmail account?

    ( Reply )
  19. PG

    chris bautista October 16th

    Wow!

    Been using typetester.org to do font configuration.
    This will fit nicely in my box of tools.

    Thanks for the tutorial!

    ( Reply )
  20. PG

    Torkild Dyvik Olsen October 16th

    If there is some way to work around the hidden email, I allso have five invites willing to share here.

    ( Reply )
    1. PG

      Gavin October 16th

      Yeah I have a couple I can hand out too…Not sure who to get your emails if you want one.

      ( Reply )
      1. PG

        Gavin October 16th

        If you dont get an invite from Jeff, then send me a PM on twitter: godonholiday

    2. PG

      Chris October 17th

      Hi !

      If you still have invites. I would really love to test this.

      heres my scr.im c…@g…l.com

      Thanks

      ( Reply )
      1. PG

        Torkild Dyvik Olsen October 21st

        I have sent one to you now!

    3. PG

      chris bautista October 25th

      Thanks Olsen! Really appreciate it!

      Going to test this ASAP!

      Getting stoked again !!!

      ( Reply )
  21. PG

    shin October 16th

    Looks good. I will try it too.

    ( Reply )
  22. PG

    mik October 16th

    Nice video Jeff, I guess it’s better to see a live action of testing instead of watching almost automaticaly movements.

    “Look into my eyes, in the eyes, not around the eyes, You’re under…
    You pick me… 3-2-1 you back in the room”

    Ahh.. yeah.. and I wanna stand into the “invitation-queue”:D

    ( Reply )
  23. PG

    Vinicius October 16th

    Great Feature. Because it don’t turn the text into images. The update time of the kit i thing it’s normal because the service is in beta.

    Just is a little bit expensive (the portfolio value).

    ( Reply )
  24. PG

    Kriszta October 16th

    Hi there!
    Thank you for this screencast, indeed. Before I did not have the time for looking aroud a little bit deeper in that typekit thing. This screencast was a great great help. Just go on. Do not worry about if this post would be popular or not. Sure it is! I am sure! If you still have any invitations I’d love to join…
    Thanks a lot.

    ( Reply )
  25. PG

    Matthew October 16th

    Looks good, I’m interested in checking it out!

    ( Reply )
  26. PG

    Jason October 16th

    Looks cool and all, but there’s already so many other font replacement services out there. Paying a monthly fee to use fonts that honestly look like I could get them from a free site doesn’t sound ideal, plus more JavaScript to load on the page…

    @font-face works for me.

    ( Reply )
  27. PG

    Mike October 16th

    Hi Jeff,

    I’m wondering what software did you use to record this screencast?

    When you were recording with Camtasia on Windows, the movement of the mouse/cursor on the screen was NOT smooth like here.

    In this screencast it definitely IS and it looks wonderful.

    Culd you share a little bit?

    Thanks in advance!

    ( Reply )
    1. PG

      Jeffrey Way October 16th

      It’s Camtasia for Mac. :)

      ( Reply )
      1. PG

        Jeffrey Way October 16th

        I’m just exporting at a higher frame-rate.

  28. PG

    Caroline Schnapp October 16th

    I am interested in an invite!

    I enjoyed your ‘impro’ style very much on that one.

    ( Reply )
  29. PG

    Orves October 16th

    @Ryan

    The advertisement is showed on basic free accounts, when you upgrade your account you will have the option to disable it.

    One thing to mention, to show the advertisement typekit uses jQuery Framework so when you disable it it also saves up some loading time.

    ( Reply )
  30. PG

    Tim October 16th

    I would really like to use that technique for my next project. Have been waiting for such a great service…
    An invite would be so appreciated :)

    ( Reply )
  31. PG

    Robert October 16th

    I am interested in an invite!

    This looks promising….seems pretty easy.

    ( Reply )
  32. PG

    joel October 16th

    I’m with Jason. This is an answer to a question nobody (sensible) should be asking.
    From Cufon to SWIFR to @fontface (not to mention image replacement which has its specific place and purpose) who the hell needs a complicated offsite paid font interface??

    ( Reply )
    1. PG

      Gavin October 16th

      I use it, I recommend fonts to my clients when I design a site, often they ask me for a more hand written font or a thicker font etc..

      This allows me to sit down with them and go through the catalogue on typekit and find the font for them, after a couple of clicks we can see it in place on the site.

      I guess your paying for convenience, which you could always pass onto the client, who as we know has no idea how limited web browsers are in displaying fonts.

      Currently $50 for 5 sites a year… thats not that much in the grand scheme of things.

      ( Reply )
      1. PG

        Caroline Schnapp October 16th

        What if you already paid big bucks to get commercial license to a font… Can you add it to your library?

  33. PG

    Colin October 16th

    If they’re FOSS fonts and the system is just using @font-face (and falling back to the stack for unsupporting browsers), what exactly are you paying for? An auto generated JS file? Why not just use @font-face in your css and hope your visitors have a modern browser. It seems like it would have the same outcome.

    ( Reply )
  34. PG

    Barry Wood October 16th

    The downsides to this are the cost and the reliance on the typekit site. I would think that it would be better to use your own @font-face with fonts downloaded from somewhere like fontsquirrel.com. That way everything is under your control and there are no limits on the number of sites or fonts.

    Michael Owens touched on this in his Aug 14th tutorial but maybe a full tutorial on @font-face would be in order?

    ( Reply )
  35. PG

    Chad Warren October 16th

    Great screencast. I would LOVE an invite to this.

    ( Reply )
  36. PG

    Maxi October 16th

    Invite please :)

    ( Reply )
  37. PG

    Muhammad Adnan October 16th

    waiting for typekit invite :)

    ( Reply )
  38. PG

    Jhay October 16th

    Typekit is awesome.

    ( Reply )
  39. PG

    Tyler Featherston October 16th

    I’d love an invite :)

    ( Reply )
  40. PG

    Keith October 16th

    I would love a typekit invite.

    ( Reply )
  41. PG

    Richard Bagshaw October 16th

    This looks really interesting, I would really appreciate an invite.

    ( Reply )
  42. PG

    David Singer October 16th

    I would like an invite as well :) david@ramaboo.com

    ( Reply )
  43. PG

    Drazen Mokic October 16th

    A really nice idea, i already heared some podcasts about it from sitepoint and it sounds good, i think its a good way for the type industry.

    ( Reply )
  44. PG

    Fatih October 16th

    I want an invite too :)

    ( Reply )
  45. PG

    Dave Brookes October 16th

    Would be great to get an invite to have a play with this, count me for this one!

    ( Reply )
  46. PG

    Joseph Rosario October 16th

    It’s be great if I could get an invite too. :-)

    ( Reply )
  47. PG

    Tylor October 16th

    Raises hand! I would like one :)

    ( Reply )
  48. PG

    Pedro Valentim October 16th

    Gimme :)

    ( Reply )
  49. PG

    Stephan October 16th

    This will make things a lot easier and better looking!

    ( Reply )
  50. PG

    Justin October 16th

    Looks like it could be a Cufon killer ;) If they speed it up a bit. I wonder what it’s doing that takes 3 minutes to process..

    Also, In the post footer (”Enjoy the post?”), I noticed that you guys have a bunch of counters. I can’t, for the life of me, find the FB Share counter.. Any help?

    ( Reply )
  51. PG

    Andreas S October 16th

    Seems quite nice, i have just been battling Cufon for a while now with assistance from your screencast on that subject, typekit seems much neater even though Cufon was quite good once i got my head around it.

    So i humbly place myself in the long queue for an invite :)

    ( Reply )
  52. PG

    Valldeperas October 16th

    Seems interesing, by now I’ll keep with Cufón, with some things is pretty useful.

    ( Reply )
  53. PG

    Erik Reagan October 16th

    Interesting service. I’m excited to see how it grows and evolves over time.

    Looking forward to possibly being 1 of the 100 invites :)

    ( Reply )
  54. PG

    Richard October 16th

    Certainly believe this is a game changer, once everything is worked out and some more of the major foundries get on board (because I believe, eventually, they will) that this will change the face of our business – hugely for the better.

    ( Reply )
  55. PG

    patty October 16th

    wanna give this service a try too!

    ( Reply )
  56. PG

    Sirupsen October 16th

    It looks like an interesting service, I’d love to try it out for my own Webdesigns. :)

    ( Reply )
  57. PG

    jbayone October 16th

    Nice, can’t wait to try it out. Now I can make use of all the fonts I get fron dafont.com

    ( Reply )
  58. PG

    Alex H. October 16th

    Wow. Let me participate!

    ( Reply )
  59. PG

    Andrew-David October 16th

    Awesome!
    I think I may start using their service for my future projects,
    Thanks Jeff!

    ( Reply )
  60. PG

    Cody Robertson October 16th

    I would love an Invite. I might use this service in future projects.

    Thanks Jeff.

    ( Reply )
  61. PG

    Stephen October 16th

    I’d love an invite, if you have one to spare. I liked the “exploratory” screencast.

    ( Reply )
  62. PG

    dan October 16th

    I’d be glad to give it a shot!

    ( Reply )
  63. PG

    Richard Bagshaw October 16th

    The biggest problem for me is that even on the “portfolio plan” you are only able to use the fonts on 5 sites. I have way more than 5 clients, and each of my clients tend to have more than one site, so what happens when I get to my 6th website? I have to upgrade and then I am limited to 40, at which point I can’t upgrade again.

    ( Reply )
  64. PG

    Aziz Light October 16th

    Nice screencast. One thing I don’t understand though, is why would anyone pay for something that you can do for free. You can just use @font-face with packages from here: http://www.fontsquirrel.com/fontface

    Besides, I don’t really like to rely to 3rd party for such things (what if the typekit server goes offline?)

    However I do reckon that it might solve a lot of headaches, for now at least, especially considering how easy it is to use.

    So yeah, I would love to have an invite if you can spare one, maybe I’ll end up loving this service (only idiots never change their minds)

    ( Reply )
  65. PG

    Scott October 16th

    I’d like an invite…

    ( Reply )
  66. PG

    stefan schaefer October 16th

    i just checked in from twitter and, well an invite would be really nice.

    thank you
    carrrramba

    ( Reply )
  67. PG

    Burak October 16th

    Can I have an invite please?

    Also thanks for the screencast contest prize.

    ( Reply )
  68. PG

    Jen October 16th

    I really enjoyed the screencast, it looks like a good idea and would love to give it a go on some of my current projects. Would love an invite!

    Thanks
    Jen

    ( Reply )
  69. PG

    R. B. Gottier October 16th

    Wow, typekit is awesome. If I don’t get one of the 5 accounts, I’ll for sure be purchasing my own.

    ( Reply )
  70. PG

    Eric October 16th

    I registered this morning for the beta but if you have this many invites I would love to use one

    Thanks

    ( Reply )
  71. PG

    Pierce Moore October 16th

    NetTuts, I love you! I would love an invite to TypeKit! it looks amazing!

    ( Reply )
  72. PG

    Chris October 16th

    Jeff,

    The fonts on the demo.jefrrey-way.com page don’t work anymore. According to your source code, it should be working. Do you know why?

    ( Reply )
    1. PG

      Caroline Schnapp October 17th

      Hi Chris,

      It works for me, and the URL is demo.jeffrey-way.com.

      It’s a tad bit disappointing though because the 1st time you access the page it takes a while for the font to be ‘redrawn’. Takes a while (too long in my opinion) for the JavaScript to load.

      Mind you, I have seen others’ use of cufon taking just as long.

      ( Reply )
      1. PG

        Caroline Schnapp October 17th

        Furthermore, there are jagged edges even when the font-size is very large Looks pretty bad.

        I would be curious about trying other fonts.

      2. PG

        Caroline Schnapp October 17th

        Interesting, the redrawing only shows in Firefox.

        In Safari, or IE7 or IE8, the page remains blank for a while then when content finally appears the JavaScript has loaded and you don’t see a flash of unstyled text (if you will).

      3. PG

        Chris October 17th

        It was a FF problem on my end. False alarm.

  73. PG

    Kriffin October 16th

    It’s awesome this one… I’d tried to win an invite but i’ve lost… If u can send me an invite say how can i greet u !

    I must to use it for a personnal project but i can’t !

    ( Reply )
  74. PG

    Brad October 16th

    How did this work out with the PC? I find it just as easy to make @font-face and use the MS tool WEFT and make the EOT fonts for the ones I like.

    Although if you are on multiple sites typekit might be quicker for a developer to use.

    ( Reply )
  75. PG

    Kevin October 16th

    I would love an invite! I’m so excited for the new possibities!

    ( Reply )
  76. PG

    Meshach October 16th

    May I please have an invite? :)

    ( Reply )
  77. PG

    Marcelo Kanzaki October 16th

    Nice video as aways.

    I hope i get picked to win an invite. :)

    ( Reply )
  78. PG

    Daan October 17th

    I’d really love that screencast, and no Jeffrey, you didn’t bore us :D

    I’d like an invite if possible!

    ( Reply )
  79. PG

    John October 17th

    It looks a great idea and a bit easier than cufon, but I agree with some of the other posts that you are outsourcing, paying for, and losing control of the page style rather than just elements of additional functionality.

    On the other hand, the ability to view and choose from a large amount of fonts without worrying about licencing issues and too much about implementation is appealing though for smaller or quick projects and the price for multiple sites isn’t too bad.

    An invite to have a play with it would be nice, and it was another great video.
    (I’m really looking forward to the next code ignighter one too!)

    ( Reply )
    1. PG

      Caroline Schnapp October 18th

      Agreed on all points.

      ( Reply )
  80. PG

    Jaysone October 17th

    Nice screencast..would like to try typekit..please do give me an invite. Just wanted to know if the ‘diving into php” and “wordpress for designers” screencast have been discontinued? Thanks again :)

    ( Reply )
  81. PG

    Ben October 17th

    An invite would be great. Typekit seems to be much better than cufon and so on.

    ( Reply )
  82. PG

    Domas October 17th

    Typekit seems to be much more better then cufon, not even mentioning sifr(what a head ache). Can’t wait to try it!

    ( Reply )
  83. PG

    Dru Martin October 17th

    It’s really exciting to know that this technology is just around the bend. Free us designers to use beautiful fonts!

    If you have any free beta invites left please send one my way!

    ( Reply )
  84. PG

    Jamie October 17th

    Would love an invite! :) ta muchly!

    ( Reply )
  85. PG

    Adrian October 17th

    I’m interested in an invite.

    ( Reply )
  86. PG

    Craigsnedeker October 17th

    who needs typekit? css3 ftw.

    ( Reply )
  87. PG

    adrusi October 17th

    interesting, but i saw that it used @font-face in css, so it’s just a js version of css3, what’s the point of paying for it?

    ( Reply )
  88. PG

    Brian Egan October 17th

    Hi Jeffrey,

    If you still have a couple of invitations, I’d love to get my hands on one. Thanks for the cool vid!

    ( Reply )
    1. PG

      Brian Egan October 18th

      I found myself an invite, and now have 5 to give away! If you want one, please twitter me @brianegan with your First and Last name, and Email Address.

      ( Reply )
  89. PG

    Neilly October 17th

    Making post for choosing invite purposes :D lol jk

    Thanks for all the work you do and for the calm voice too lol

    (and you dont bore people lol)

    ( Reply )
  90. PG

    unnikrishna menon damodaran October 18th

    It’s really going to bridge the gap of “Typographic Excellence” on the web. Amazing and it’s so simple to execute. Well done Typekit.

    ( Reply )
  91. PG

    Luiz Alvaro October 18th

    I’ve 4 invites for typekit

    my email is luizin.alvaro@gmail.com

    feel free to send me you request

    ( Reply )
  92. PG

    Phsyckr October 18th

    Doesn’t work on Google Chrome 4

    ( Reply )
  93. PG

    unnikrishna menon damodaran October 19th

    hi all,

    those who are asking for an invite please go to http://typekit.com/

    and enter your email address and wait for a reply.

    ( Reply )
  94. PG

    Portugese Wijn October 19th

    Great screencast and a very interesting service. Still, I don’t like the idea of being dependent of an external service for the layout of my websites.

    ( Reply )
  95. PG

    Nori Silverrage October 19th

    Hmm, well I don’t see much of a benefit in using this to just using @font-face. The only advantage i see is that you’ll most likely get a better selection of fonts. But the hundreds of free and open source fonts out there seems to be enough to me.

    Maybe it’d be good for someone who designs a lot of websites, but even then I’m not sure.

    ( Reply )
  96. PG

    straw October 20th

    Yours tuts are very helpful! Thx so much:)

    ( Reply )
  97. PG

    Yanay Zohar October 22nd

    It’s a great idea, but it would be even better if the cost in page size would be smaller.
    High traffic websites can’t afford to add a ~200K for a single font upgrade.

    ( Reply )
  98. PG

    Munjeet Singh October 23rd

    Great screencast – sometime all you have time for is a very quick overview, so this was perfect.

    Looks like a decent solution, if anyone has a spare invite, I would like to give it a try.

    Cheers.

    ( Reply )
  99. PG

    Ash October 23rd

    I’ve been doing a LOT of research on this topic, and this service for my company for a little while now. I can see absolutely no reason to use TypeKit over @font-face. None. Set up a WOFF, EOT, SVG and TTF font in your CSS file, upload the fonts and call it a day.

    http://www.fontsquirrel.com/fontface

    Download a couple of fontface kits from FontSquirrel, explore the css & html, learn something and avoid loading unnecessary Javascript files and becoming reliant on offsite sources for your visual styles. This service is absurd. Good developers and designers are already worried enough about FOUT without having to load the fonts from an offsite source through Javascript.

    The subject can be confusing, but do yourselves a favor and do the research yourselves. This is a horrible solution for web embedded fonts, when free of cost. Once you apply a monthly/annual fee, it becomes downright absurd.

    ( Reply )
  100. PG

    Bronson Quick October 26th

    Awesome screencast JW. I’m just about to go in and have a play around with it as well.

    I’ve been working with Cufon on some sites this week and it really annoys me that it doesn’t copy and paste nicely. I’m sure they’ll fix that but TypeKit looks like a winner.

    Thanks again for the invite to join Typekit!

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    October 26th