Comments on: Typekit Font Events https://blog.typekit.com/2010/05/14/typekit-font-events/ News about Typekit Sat, 31 Jul 2010 18:57:34 +0000 hourly 1 https://wordpress.org/?v=5.4.1 By: David Cole https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1400 Sat, 31 Jul 2010 18:57:34 +0000 http://blog.typekit.com/?p=920#comment-1400 Just a quick note about the documentation, in the example it reads:

h1 {
visiblity: hidden;
}
.wf-active h1 {
visiblity: visible;
}

The word “visibility” is spelled incorrectly, it’s missing the third letter “i”.

]]> By: Michael Hines https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1399 Fri, 16 Jul 2010 20:34:04 +0000 http://blog.typekit.com/?p=920#comment-1399 Sorry, should be .wf-active h1, .wf-inactive h1 {
visibility: visible;
}

]]> By: Michael Hines https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1398 Fri, 16 Jul 2010 20:30:37 +0000 http://blog.typekit.com/?p=920#comment-1398 If you’re having trouble with FOUT, and you’re adding the fonts in your own CSS you probably aren’t setting up the rules yet. This is a lazy way, but it hides your whole page until the fonts are ready:

.wf-loading {
visibility: hidden;
}

The better way is to add visibility: hidden; only to the selectors that use downloaded fonts:

h1 {
font-family: hooligan-1;
visibility: hidden;
}

.wf-active, .wf-inactive {
visibility: visible;
}

OR, best, have a fallback in case the fonts never load:

.wf-active h1 {
font-family: hooligan-1;
}

.wf-inactive h1 {
text-indent: -10000px;
background: url(my-fallback-image.jpg) no-repeat;
}

.wf-loading h1 {
visibility: hidden;
}

]]> By: Henric https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1397 Thu, 17 Jun 2010 10:02:27 +0000 http://blog.typekit.com/?p=920#comment-1397 Hi!
Loving Typekit so far, just can’t seem to get around this problem.
Would really appreciate it if you could write a step-by-step tutorial on how to get rid of the FOUT. I tried the CSS stuff but it just aint workin =/

Thanks!
/Not a hard core programmer

]]> By: Colin Sullivan https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1396 Wed, 02 Jun 2010 04:04:02 +0000 http://blog.typekit.com/?p=920#comment-1396 In reply to Colin Sullivan.

All the inconsistencies and problems went away when I started using the general WebFont loader found here:

http://github.com/typekit/webfontloader/blob/master/docs/MODULES.md

]]> By: Ryan Carver https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1395 Mon, 24 May 2010 17:47:09 +0000 http://blog.typekit.com/?p=920#comment-1395 In reply to Tobias Oetiker.

Hi Tobias, thanks for the note. We’re tracking that issue on the project page

]]> By: Tobias Oetiker https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1394 Sun, 23 May 2010 10:49:43 +0000 http://blog.typekit.com/?p=920#comment-1394 I just tried to use this in a local file. file:// this does not work, as the webfont loader writes a css file without protocol into the header …

<link rel=”stylesheet” href=”//fonts.googleapis.com/css?family=Droid+Sans%7CDroid+Sans:bold%7CDroid+Sans+Mono”>

instead of

<link rel=”stylesheet” href=”http://fonts.googleapis.com/css?family=Droid+Sans%7CDroid+Sans:bold%7CDroid+Sans+Mono”></link>

cheers
tobi

]]> By: Tobias Oetiker https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1393 Sun, 23 May 2010 10:49:00 +0000 http://blog.typekit.com/?p=920#comment-1393 I just tried to use this in a local file. file:// this does not work, as the webfont loader writes a css file without protocol into the header …

instead of

cheers
tobi

]]> By: Krystyn https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1392 Fri, 21 May 2010 14:37:18 +0000 http://blog.typekit.com/?p=920#comment-1392 dagomar +10

]]> By: dagomar https://blog.typekit.com/2010/05/14/typekit-font-events/#comment-1391 Thu, 20 May 2010 06:36:40 +0000 http://blog.typekit.com/?p=920#comment-1391 “Fout” means wrong in dutch 🙂

]]>