caycefischer · February 29, 2012 21:09
diff --git a/ligatures.html b/ligatures.html
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>ligature test</title>
  <meta name="description" content="consistency in the rendering of ligatures with typekit">
  
  <script type="text/javascript">
      TypekitConfig = {
        kitId: 'ruj3whd',
        scriptTimeout: 3000
      };
      (function() {
        var h = document.getElementsByTagName('html')[0];
        h.className += ' wf-loading';
        var t = setTimeout(function() {
          h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, '');
          h.className += ' wf-inactive';
        }, TypekitConfig.scriptTimeout);
        var tk = document.createElement('script');
        tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
        tk.type = 'text/javascript';
        tk.async = 'true';
        tk.onload = tk.onreadystatechange = function() {
          var rs = this.readyState;
          if (rs && rs != 'complete' && rs != 'loaded') return;
          clearTimeout(t);
          try { Typekit.load(TypekitConfig); } catch (e) {}
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(tk, s);
      })();
  </script>

  <style type="text/css">
    div {
      margin: 5em auto;
      width: 30em;
      border-top: 5px solid #888;
      text-rendering: optimizeLegibility;
      -moz-font-feature-settings: "liga=1";
      font-variant-ligatures: common-ligatures;
    }
    .one {
      font-family: Garamond, Baskerville, "Hoefler Text", serif;
    }
    .two {
      font-family: "adobe-garamond-pro", Garamond, Baskerville, "Hoefler Text", serif;
    }
    .attrib {
      font-style: italic;
  
      border-top: 2px solid #AAA;
    }
  </style>

 </head>
 <body>

  <div class="one">
    <h1>fine coffee flavor</h1>    
    <p>With a normal font stack</p>
  </div>
  
  <div class="two">
    <h1>fine coffee flavor</h1>    
    <p>With typekit Adobe Garamond Pro</p>
  </div>

  <div class="attrib">
    <p>consistency in the rendering of ligatures with typekit</p>  
    <p><a href="http://twitter.com/zakkain/status/174916403034472449">@zakkain</a></p>
  </div>

 </body>
 </html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>ligature test</title>
	<meta name="description" content="consistency in the rendering of ligatures with typekit">

	<script type="text/javascript">
	TypekitConfig = {
	kitId: 'ruj3whd',
	scriptTimeout: 3000
	};
	(function() {
	var h = document.getElementsByTagName('html')[0];
	h.className += ' wf-loading';
	var t = setTimeout(function() {
	h.className = h.className.replace(/(\s\|^)wf-loading(\s\|$)/g, '');
	h.className += ' wf-inactive';
	}, TypekitConfig.scriptTimeout);
	var tk = document.createElement('script');
	tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
	tk.type = 'text/javascript';
	tk.async = 'true';
	tk.onload = tk.onreadystatechange = function() {
	var rs = this.readyState;
	if (rs && rs != 'complete' && rs != 'loaded') return;
	clearTimeout(t);
	try { Typekit.load(TypekitConfig); } catch (e) {}
	};
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(tk, s);
	})();
	</script>

	<style type="text/css">
	div {
	margin: 5em auto;
	width: 30em;
	border-top: 5px solid #888;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings: "liga=1";
	font-variant-ligatures: common-ligatures;
	}
	.one {
	font-family: Garamond, Baskerville, "Hoefler Text", serif;
	}
	.two {
	font-family: "adobe-garamond-pro", Garamond, Baskerville, "Hoefler Text", serif;
	}
	.attrib {
	font-style: italic;

	border-top: 2px solid #AAA;
	}
	</style>

	</head>
	<body>

	<div class="one">
	<h1>fine coffee flavor</h1>
	<p>With a normal font stack</p>
	</div>

	<div class="two">
	<h1>fine coffee flavor</h1>
	<p>With typekit Adobe Garamond Pro</p>
	</div>

	<div class="attrib">
	<p>consistency in the rendering of ligatures with typekit</p>
	<p><a href="http://twitter.com/zakkain/status/174916403034472449">@zakkain</a></p>
	</div>

	</body>
	</html>