Doodle Graphics

Something I meant to include in yesterday's post was around the steps I'd taken to get TypeKit working with the new GoogleApi WebFont Loader hosted version.

As I'm not using Google AJAX api  decided to just call the file directly, but I couldn't seem to get it to work using the docs on GoogleApi using the WebFontConfig object, however following the directions on the Git hub seemed to work better:

Call the webfont.js file:

<script type="text/javascript" 

        src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Then call load on the WebFont object:

  WebFont.load({

    typekit: { id: 'gjb1flq' }

    });

Passing in your TypeKit Id, (not the Kit Id as is implied in the docs).

To reduce the "Flicker of Unstyled Text" I then added the following to my CSS:

.wf-loading h1 { visibility: hidden; }

.wf-loading h2 { visibility: hidden; }

.wf-loading h3 { visibility: hidden; }

.wf-loading #logo p { visibility: hidden; }

.wf-loading code { visibility: hidden; }

.wf-loading pre { visibility: hidden; }

.wf-active { visibility: visible; }

Basically, as the web fonts are loading, the WebFont.js applies the .wf-loading style to html element, then once they are all in, applies the .wf-active style.

Rather than following the guidance on the git hub page (which suggests having the base state of the h1 hidden, and only showing it when the fonts are active) I've gone down this route, so if the script fails to load, or is turned off, the titles, code, etc will still show, albeit in their default fonts.

If I really wanted to I guess I could implement font based activation as well, using the .wf-adelle1adelle2-n7-active event.

Filed under: AJAX, Site Updates