TypeKit: Removing the Wrapping Paper
videos

Typekit: Removing the Wrapping Paper

on Oct 15th 2009 with 120 comments

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!

The Screencast

Other Viewing Options

Example

Thank you, Screencast.com!


Screencast.com

…for providing the hosting for these video tutorials.


Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://thebookofjoe.com nanochrome

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

  • http://www.stevemullencreative.com Steve Mullen

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

  • http://www.shauncrittenden.com Shaun

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

  • Iankulov Miodrag

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

  • http://fwebde.com/ Eric B.

    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?

  • Adrian

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

  • http://jwatcher.com Jerry Watcher

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

  • Chris Conger

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

  • http://www.jenworks.com Jennifer Enciso

    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!

  • http://www.tyoinspired.com Jacob Tyo

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

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

    twitter: jakester2

  • http://code621.com Dan

    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.

  • begs

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

  • http://benniemosher.com Bennie Mosher

    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!

  • Tim

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

  • Pontiac

    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! ^^

  • vasil

    Good Stuff.

  • Ryan

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

    Thanks,
    Ryan.

    • Gavin

      The advert is dropped on the full version.

  • Garry Aylott

    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?

  • http://www.potatokorner.co.cc chris bautista

    Wow!

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

    Thanks for the tutorial!

  • Torkild Dyvik Olsen

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

    • Gavin

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

      • Gavin

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

    • http://www.potatokorner.co.cc Chris

      Hi !

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

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

      Thanks

      • Torkild Dyvik Olsen

        I have sent one to you now!

    • http://potatokorner.co.cc chris bautista

      Thanks Olsen! Really appreciate it!

      Going to test this ASAP!

      Getting stoked again !!!

  • http://www.okadadesign.no/blog/ shin

    Looks good. I will try it too.

  • mik

    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

  • Vinicius

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

  • Kriszta

    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.

  • Matthew

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

  • http://www.vagrantradio.com Jason

    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.

  • Mike

    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!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s Camtasia for Mac. :)

      • http://www.jeffrey-way.com Jeffrey Way
        Author

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

  • http://11heavens.com/ Caroline Schnapp

    I am interested in an invite!

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

  • http://www.ortwin.nl Orves

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

  • Tim

    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 :)

  • Robert

    I am interested in an invite!

    This looks promising….seems pretty easy.

  • joel

    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??

    • Gavin

      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.

      • http://11heavens.com/ Caroline Schnapp

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

  • Colin

    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.

  • http://www.otheroom.com Barry Wood

    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?

  • Chad Warren

    Great screencast. I would LOVE an invite to this.

  • http://maxikey.de Maxi

    Invite please :)

  • http://www.imblog.info Muhammad Adnan

    waiting for typekit invite :)

  • http://jhaygamba.com Jhay

    Typekit is awesome.

  • http://Www.tylerfeatherston.com Tyler Featherston

    I’d love an invite :)

  • Keith

    I would love a typekit invite.

  • Richard Bagshaw

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

  • http://ramaboo.com David Singer

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

  • http://www.newarts.at Drazen Mokic

    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.

  • Fatih

    I want an invite too :)

  • http://www.davebrookes.info Dave Brookes

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

  • http://www.soopah256.com/ Joseph Rosario

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

  • http://www.twitter.com/tylorskory Tylor

    Raises hand! I would like one :)

  • http://www.pedrovalentim.net Pedro Valentim

    Gimme :)

  • http://hilbelink.net Stephan

    This will make things a lot easier and better looking!

  • http://www.jstnjns.com/ Justin

    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?

Newer Comments →