I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I’ll show you the entire process from start to finish, as well as touch on the advantages and disadvantages.
Links from Video:
#69: First Ten Minutes with TypeKit
Chris Coyier
on
(Updated on )
nice, I’ll watch now. I just got my mail and i just finished registering too
Got my invite today also, really excited to try it out.
Thanks for the quick intro Chris. :-)
can you give us an idea of how much it cost?
Ultimately I would love to see.webfont become the standard. But in the interim this is very cool, I can’t wait to see how Fontdeck compares to this.
I think that’s a pretty interesting system.. I’m going to have to give it a try
That is pretty sweet. How much does it cost for the one you signed up for? I just tried heading over to typekit.com and it says that the website is still coming…
Cheers for the screencast
About the flashing of the underlaying font.
Although I haven’t tested this in a JS Off/CSS On environment (’cause I pretty much know it’s not gonan work)….
you could make the elemet display:none, and after it’s done it’s magic make it display:block again.
Well, just tried it out as I received the same email Chris did. Took a little longer to realise that I wanted to use the fonts but eventually worked.
When it did load, fonts worked seamlessly, even with links.
Only thing I found is that it broke the rest of all my jQuery based scripts such as jCarousel and some custom jQuery scripts I had written.
But still, its only early days and I’m sure with some tinkering on their end and probably mine more so, this could be a great asset to your toolkit.
@ConCy A better solution may be to use
visibility: hidden;instead, as this allows the elements dimensions to be calculated properly. I have been toying around with this a bit on larger-scale sites, to reduce the “flicker” often seen when waiting for all server transactions to be completed.It’s a fairly elegant solution and way easier than any of the other solutions Chris mentioned. I do, however, question loading the entire jQuery library regardless if it is loaded prior as it is in the example. Instead, it might be beneficial to check if jQuery has been loaded and load it if not. The fact that it is loaded twice, certainly will attribute to the delay, albeit minute. @Jaymie This is most likely the cause of your issue, as you may be using an older version of jQuery which may conflict with the version being loaded by TypeKit.
Unfortunately, the “protection” offered for the fonts is slim at best. Each font is simply base64-encoded. With a little bit of know-how and a minute or two of time, the font can be “yours” quite easily. I’ll be curious how quickly their library grows based on this fact.
@Christopher Mitchell I am using the latest jQuery but I will have to check if its being loaded twice…
TypeKit has outlined all of the steps they take to “protect” the fonts on their blog. There’s more to it than base64 encoding.
However, they admit that it’s not foolproof saying:
What is think is really cool about this is that it doesn’t make you hassle with buying seperate fonts and managing each purchase seperately. That has been my major deterent to using custom fonts. I didn’t really know how to easily do it legally in the first place. It is nice to have it just taken care of.
What’s the name of your editor please ?
Chris is using Coda, which I use a lot and find it to be a great application.
Also check out Espresso, but it is still fairly buggy. Espresso 2.0 should be something to look out for though!
Coda by Panic
Visit Coda Website
Espresso by MacRabbit
Visit Espresso Website
Thanks a lot !
Once again to the “flashing-thing”… I’m pretty sure that this can’t be avoided cause the Javascript which is doing the replacement-magic needs its time to load – and I could bet that the more fonts you use, the longer it will take to replace the fonts on your page. I played around with cufon, sifr, typeface and flir.js (which works serverside with the dynamic generation of images), but everywhere, there is a little flash included. I just don’t think that it’s a good solution to work with “visibility:hidden”, until the font-replacement-plugin of your choice has done it’s work, because
a) what if users have js turned off? They can’t see anything which you have replaced, if you don’t work with ugly things like to override that visibility:hidden-thingy and
b) it’s just even more ugly to see the new fonts come flashing out of the nowhere and people might have already left your page if it seems not responsive enough
Good point about users with JS turned off. You could get around that by switching the display attribute using JS itself, since only users with JS enabled can benefit from this type of font replacement anyway.
My TypeKit account request hasn’t been answered yet, so I don’t have the ability to test this, but I think the following may work:
(1) After you have linked in the jQuery library, include a line of code to hide the visibility of each element that a TypeKit font is being applied to:
$("h1").css("visibility","hidden");(2) In the second script element provided by TypeKit, add some code, so that INSTEAD OF this:
try{Typekit.load();}catch(e){}it looks like this:
try{Typekit.load();}catch(e){}$("h1").css("visibility","visible");Note again that “h1” should be replaced in both cases with whichever elements your Typekit fonts target.
What we want to happen here is to switch visibility back on as soon as the font replacement has happened. I don’t know enough about writing callbacks to be confident my approach will work. In fact I would assume it won’t because I don’t know what’s happening in that code Typekit is providing. It would be interesting to try, though!
And even if this does work, it’s a bit of a hack, which is a shame. The promise of Typekit is to be plug-and-play, right out of the box — which this definitely isn’t.
In my first paragraph I referred to the “display” attribute, but actually meant the “visibility” attribute.
As other have pointed out here, the benefit of the visibility attribute is that it doesn’t remove the element from the flow completely, and preserves its dimensions. Doing this with “display” would replace the icky flash with an icky jump.
Hi Matt,
thanks for your explanation. I previously thought that you wanted to hide all elements you want typekit to replace via css-rule “visibility:hidden” which would be indeed stupid because of the mentioned problem with users without js enabled. Using jQuery instead to toggle the visibility is definitely a better, more sane approach.
But I still don’t understand completely what you’re trying to do by manually influencing the visibility. The process would be the following
1) Hide all elements which typekit is applied to, before they appear on the screen (document.ready).
2) Let Typekit render the fonts
3) Show the rendered elements when they’re done
BUT: You’ll have to wait until everything is completely rendered, before the user sees anything on the screen which might look even slower.
Hi Chris, I got my invite also. Looks pretty straight forward, will be trying it out pretty soon.
Looks great so far! Big fonts will be …. BIG
That’s really cool, thanks for this great demo, I can’t imagine how beautiful the web will be after this works, I only hope that they support Arabic fonts as I live and design for the Arab world you know.
Hey nice video, the first I’m watching from you.
It seems to be very promising, but what about the final cost ?
Regards from Paris
Would love an invite, would have to get the full version though as clients want all the fancy stuff
really nice
cant wait to try this,
but it doesnt work here on chrome 2.0.172.39 for some reason, works on safari and firefox
hmm
Nice demo. Good to see it is working.
Don’t you think Typekit needs a search function? I don’t want to have to look through all the fonts to find if they have the ones I want… or maybe they have it already and I’m blind.
Also… might it be fast if you load the JS file before the other attached scripts you have already? If it was first, would the flash be less noticeable?
Ian, Search and other ways of browsing fonts are on their way.
Yes, including the Typekit JS before other scripts should reduce the overall perceived load time. Let us know what you find.
I am using Typekit in the free version and it is not allowed to remove the budget. But for free…
Anyway, it is very easy to manage the font for the website. I have two options of fonts in this version.
And I had the problem with the jquery stuff too.
But it worth it.
I asume you mean, “Badge”, instead of budget.
Anyhow, I’m almost sure that if you use CSS display:none; it’ll do the trick to hide the thing.
If neccecary put that css after the TypeKit js-file, and/or “!important” it.
It’s insteresting, but doesn’t seem to work on Chrome (version 4.0.202.0 dev). The font change after the page finishes loading does bother me a little tho.
Typekit is really cool, but the flicker is a deal breaker for most of my projects.
I tried a demo with nothing but an H1 tag and the Typekit JS and still got the flicker… :( As far as I know, it’s just a limitation to font replacement techniques. Any other ideas?
I like it. As with most of the people here, the flicker does bother me a little. I can’t think of any great options other than:
1. as mentioned, keep its visibility hidden until the work is done; but being a JavaScript numpty, I’m not even sure how you can hook into the script properly…
2. if you can figure out how to do #1, you could alternatively display rendered text until the real text appears. Obviously this causes server load and somewhat defeats the purpose.
I don’t know enough about web technologies to describe “how”, but I wonder if something could be implemented on the server side to get the heavy lifting done (and cached) before the client request comes in? Also wonder if the results of executing the JavaScript can somehow be cached on the client side, so that only the first visit to that site causes the flicker, and subsequent visits are more seamless…?
I don’t know. I ramble. Half-bakedly.
Cool technology, though, and seems to be a lot easier than the alternatives.
Greg
Hey thanks for the awesome screencast. You guys bring up some important issues around jQuery and flickering. Just so you know, we’re already thinking about those issues a lot.
You can expect ‘fonts loaded’ hooks and the removal or optional-ization of jQuery from our JavaScript.
You can find a bit more discussion of these topics in our Get Satisfaction forum.
Nice video tutorial. Thanks for posting this, definitely worth checking out now I’ve seen it been used.
Whahoo its awesome i want it ! i want it ! i want it ! i want it ! i want it ! :p:p:p:p
Thanks for the preview, Chris! Can’t wait to try it.
I just got my email yesterday. I bought the “Portfolio” package, and I really like it so far. It’s great to have a legal way to use commercial fonts, IMO.
hey question, Chris i have watch ur screen cast for a while, i wondering can you using the fonts i desire the use instead the fonts they provided because you no some time if you they end up done have the font you’re looking how would i do that?
-Gasp-
This is awesome. Duly noted for inclusion in my next project. Thanks Chris!
Chris, this is amazing. I do think they just need to tie a few loose ends (like the loading time, and copy -the-class ability). Other than that, I’m super excited about it and can’t wait for it to be released. Thanks so much for sharing it.
I had a problem with IE 8 it works fine at firs, but when I hit reload it simply does’t work it’s back to the original.
First Chris, thanks for all your wonderful tutorials. A fantastic resource. I am contemplating about this whole issue… this font-snatching-from-a-third-party thing relies upon TypeKit to be up and running right? And in business for the lifetime of the website? This dependency may be worth a thought, I think.
Hmm, the demo is not working in firefox on ubuntu. Anyone have luck with this setup?
To get rid of the Flickr, create a separate CSS file called hidden.css. Within this CSS file, list out all the selectors you want the “visibility: hidden” property applied to.
In the head of your document, load this hidden.css file into your document using Javascript. This way you don’t break the JS:Off/CSS:On scenario.
To get the fonts to appear back again, you’ll need to listen for load event on the font file. Not sure if TypeKit has a callback implemented for this or not yet, but it shouldn’t be too hard to go through their code and build a solution from there.
Wow…Web 2.0 owns my mind. “FLICKER”, not “Flickr”
Just wow!
I can’t find where to signup for the beta…
Where can I do that?
That looks incredibly easy. I would love to start using that on my sites. I’m really enjoying your videos by the way.
Wow! I hope designers get behind it with by subscribing with paid account so it will continue as a service. Wow again!
I got my invite and just signed up for the trial, after seeing the screencast I’m going to pay for an account. The fonts are just way too cool!
Nice. I have a free account, and it is still pretty good.
The fact that the font library is huge will draw a lot of people. But, you can’t use any other fonts that you have bought and are not in their library.
But I digress.
I work at a fairly prominent type design studio and we have been toying with the idea of @font-face for a while now. Typekit looks like a wonderful solution for most people but I would expect this to be the tip of the ice burg. I would expect Linotype, Adobe, FF, and other large type publishing houses to start building similar tools, if they have any brains.
Also expect to see a lot more really cool and really customizable solutions from the independent studios ;)
Hi! This is my first post, I am from Argentina and my english is so bad, please forgive me! Well, I had seen some videos and all were do usefull for me. But know i have a question… why do not you use sFIR? I think that give the same solution, is free, and you can have the requiere files on your own host
As far as I know: sIFR uses flash to generate images of the letters (correct me if I’m wrong =D) and thus they aren’t selectable as text…like Chris said, there are 5+ ways to do the same thing and this is an elegant one that comes to the list!
sIFR does create a Flash object to render the letters, but within the object itself, the text *is* selectable. However, you run into a problem if you want to select any part of that text along with other text on either side of the object. Such contiguous selections, crossing over from Flash to HTML or vice-versa, cannot be made.
Great screencast, I’ve added my email and I’m looking forward to trying it out.
Very nice. Looking forward to trying it later today.
Great screencast!
Does anyone know if it’s possible to control the line-height on the text using TypeKit?
I really miss that option in Cufón and therefore I’m almost always ending up with using sIFR!
This looks like great technology. I’m looking forward to seeing more details. I did notice that the example page doesn’t show any of the cool fonts your video had. Did you pull them down?
Nice preview and nice font-problem solution! Thanx!
Finally dynamic tasty juicy fonts!! I can’t wait to use it!!
That’s pretty cool though.
I should use it too on my projects.
But what i like more than that is that you stopped ‘snatching’ all the time like you did in the first screencast videos you made ;) ;)
Greez
It looks nice, but $25/year for one webpage? Why pay for something you can do yourself for free? And when this service just quit? All your pages will lose all fancy fonts… :-(