HTTP/2 302 server: nginx date: Fri, 19 Dec 2025 06:42:37 GMT content-type: text/plain; charset=utf-8 content-length: 0 x-archive-redirect-reason: found capture at 20100523120045 location: https://web.archive.org/web/20100523120045/https://thechangelog.com/post/616093411 server-timing: captures_list;dur=0.513765, exclusion.robots;dur=0.036303, exclusion.robots.policy;dur=0.026870, esindex;dur=0.008768, cdx.remote;dur=8.732331, LoadShardBlock;dur=394.238790, PetaboxLoader3.datanode;dur=53.914033, PetaboxLoader3.resolve;dur=185.310364 x-app-server: wwwb-app221-dc8 x-ts: 302 x-tr: 434 server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0 set-cookie: wb-p-SERVER=wwwb-app221; path=/ x-location: All x-as: 14061 x-rl: 0 x-na: 0 x-page-cache: MISS server-timing: MISS x-nid: DigitalOcean referrer-policy: no-referrer-when-downgrade permissions-policy: interest-cohort=() HTTP/2 301 server: nginx date: Fri, 19 Dec 2025 06:42:38 GMT content-type: text/html; charset=UTF-8 content-length: 0 x-archive-orig-date: Sun, 23 May 2010 12:00:44 GMT x-archive-orig-server: Apache/2.2.3 (CentOS) x-archive-orig-x-tumblr-perf: "ch:0/ cm:0/ ce:0/ c:0/0 d:0/0 e:0/0" x-archive-orig-p3p: CP="ALL ADM DEV PSAi COM OUR OTRo STP IND ONL" x-archive-orig-x-tumblr-user: thechangelog x-archive-orig-x-cache-auto: miss x-archive-orig-etag: b392142b56da958e43c2b0bf5085a81e x-archive-orig-cache-control: max-age=3600 location: https://web.archive.org/web/20100523120045/https://thechangelog.com/post/616093411/webfont-loader-easy-font-face-from-google-typekit-or-you x-archive-orig-vary: Accept-Encoding x-archive-orig-x-tumblr-usec: D=52080 x-archive-orig-content-length: 0 x-archive-orig-x-cache: MISS from rack1.tumblr.com x-archive-orig-x-cache-lookup: MISS from rack1.tumblr.com:80 x-archive-orig-via: 1.0 rack1.tumblr.com:80 (squid/2.6.STABLE6) x-archive-orig-connection: close cache-control: max-age=1800 memento-datetime: Sun, 23 May 2010 12:00:45 GMT link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate" content-security-policy: default-src 'self' 'unsafe-eval' 'unsafe-inline' data: blob: archive.org web.archive.org web-static.archive.org wayback-api.archive.org athena.archive.org analytics.archive.org pragma.archivelab.org wwwb-events.archive.org x-archive-src: 52_15_20100523102852_crawl100-c/52_15_20100523120000_crawl102.arc.gz server-timing: captures_list;dur=229.781107, exclusion.robots;dur=0.014565, exclusion.robots.policy;dur=0.006985, esindex;dur=0.008957, cdx.remote;dur=50.263669, LoadShardBlock;dur=407.612038, PetaboxLoader3.datanode;dur=249.491460, PetaboxLoader3.resolve;dur=433.963145, load_resource;dur=334.703647 x-app-server: wwwb-app221-dc8 x-ts: 301 x-tr: 1047 server-timing: TR;dur=0,Tw;dur=0,Tc;dur=1 x-location: All x-as: 14061 x-rl: 0 x-na: 0 x-page-cache: MISS server-timing: MISS x-nid: DigitalOcean referrer-policy: no-referrer-when-downgrade permissions-policy: interest-cohort=() HTTP/2 200 server: nginx date: Fri, 19 Dec 2025 06:42:39 GMT content-type: text/html; charset=UTF-8 x-archive-orig-date: Sun, 23 May 2010 12:00:44 GMT x-archive-orig-server: Apache/2.2.3 (CentOS) x-archive-orig-x-tumblr-perf: "ch:13/rate-limiter,tumblelog_id_for_host,tumblelogs,posts,compact_tumblelog,pages,blocks,blocks,compact_tumblelog,compact_tumblelog,compact_tumblelog,compact_tumblelog,notes cm:4/auto,tumblelog_html,notes,diff_to_previous ce:0/ c:0/0 d:0/0 e:0/0" x-archive-orig-p3p: CP="ALL ADM DEV PSAi COM OUR OTRo STP IND ONL" x-archive-orig-x-tumblr-user: thechangelog x-archive-orig-x-cache-auto: miss x-archive-orig-etag: 8fa002d2997d6af519979f8a7beaccc4 x-archive-orig-link: ; rel=shorturl x-archive-orig-link: ; rel=icon x-archive-orig-content-length: 23837 x-archive-orig-vary: Accept-Encoding x-archive-orig-x-tumblr-usec: D=248103 x-archive-orig-x-cache: MISS from rack1.tumblr.com x-archive-orig-x-cache-lookup: MISS from rack1.tumblr.com:80 x-archive-orig-via: 1.0 rack1.tumblr.com:80 (squid/2.6.STABLE6) x-archive-orig-connection: close x-archive-guessed-content-type: text/html x-archive-guessed-charset: utf-8 memento-datetime: Sun, 23 May 2010 12:00:45 GMT link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate" content-security-policy: default-src 'self' 'unsafe-eval' 'unsafe-inline' data: blob: archive.org web.archive.org web-static.archive.org wayback-api.archive.org athena.archive.org analytics.archive.org pragma.archivelab.org wwwb-events.archive.org x-archive-src: 52_15_20100523102852_crawl100-c/52_15_20100523120000_crawl102.arc.gz server-timing: captures_list;dur=0.527207, exclusion.robots;dur=0.018883, exclusion.robots.policy;dur=0.009041, esindex;dur=0.010775, cdx.remote;dur=11.862832, LoadShardBlock;dur=166.510728, PetaboxLoader3.datanode;dur=232.326675, PetaboxLoader3.resolve;dur=124.365879, load_resource;dur=201.301263 x-app-server: wwwb-app221-dc8 x-ts: 200 x-tr: 432 server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0 x-location: All x-as: 14061 x-rl: 0 x-na: 0 x-page-cache: MISS server-timing: MISS x-nid: DigitalOcean referrer-policy: no-referrer-when-downgrade permissions-policy: interest-cohort=() content-encoding: gzip

The Changelog - Open Source moves fast. Keep up.

Open source moves fast. Keep up.

Brought to you by Adam and Wynn, The Changelog is what's fresh and new in open source.

• 
• 
• 

/* 2010.05.20 */

WebFont Loader - easy @font-face from Google, TypeKit, or your own site

Thanks to greater browser support for @font-face, web typography is breaking free from the same boring font stacks we’ve known for the last ten years. As with any new technique, @font-face introduces new challenges for finding the right cross-browser syntax, especially to avoid things like Firefox’s Flash of Unstyled Text issue.

WebFont Loader is an open source project from Typekit that helps you easily embed web fonts in a consistent, cross browser way regardless of the font source. It also provides some events you can handle as fonts are loaded, letting you more closely control the font rendering process.

<script>
  WebFont.load({
    google: {
      families: ['Droid Sans']
    }
  });
</script>
<style>
  h1 {
    font-family: 'Droid Sans';
    visibility: hidden;
  }
  .wf-active h1 {
    visibility: visible;
  }
</style>

In this example, we can hide the h1 until the Droid Sans font has finished loading.

WebFont Loader is hosted on Google AJAX APIs and can use the Google Font API to load fonts from Google, from TypeKit, or even your own custom site. Hopefully we’ll see support for FontSquirrel and FontSpring soon.

[Source on GitHub]

← Back to The Changelog

blog comments powered by Disqus

1. nem liked this
2. marco liked this
3. millisami liked this
4. jiewmeng reblogged this from thechangelog

← Back to The Changelog

© 2009 The Changelog // Icons by Glyphish