Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

demo page for typekit w/ multiple variations

  • Loading branch information...
commit d7610203bcf8af937ee32e58acb34a5203493461 1 parent 3152f2a
Ryan Carver rcarver authored
4 lib/webfontloader/demo/public/events-styles.html → lib/webfontloader/demo/public/events-variations.html
View
@@ -46,7 +46,7 @@
margin-bottom: 0;
visibility: hidden;
}
-
+
.wf-droidserif-n4-active #droidregular {
visibility: visible;
}
@@ -100,7 +100,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/events-styles.html">Reload Cached</a>
+ <a href="/events-variations.html">Reload Cached</a>
</p>
<p>
The goal of this page is to show all of the font loading event callbacks when using
10 lib/webfontloader/demo/public/index.html
View
@@ -44,7 +44,7 @@
<ol>
<li><a href="/event-css-active-multiple.html">Multiple font loads</a>: Use CSS to control more than one font.</li>
<li><a href="/events.html">Multiple typefaces</a>: The full CSS and JS event cycle when using multiple typefaces.</li>
- <li><a href="/events-styles.html">Multiple fonts</a>: The full CSS and JS event cycle when using multiple weights and styles of one typeface.</li>
+ <li><a href="/events-variations.html">Multiple variations</a>: The full CSS and JS event cycle when using multiple weights and styles of one typeface.</li>
</ol>
<h2>IE Behavior</h2>
@@ -57,5 +57,13 @@
<li><a href="/ie-slow-js.html">Slow JS</a>: Restore the default IE loading behavior.</li>
</ol>
+ <h2>Tests</h2>
+ <p>
+ Additional demo pages to test specific functionality.
+ </p>
+ <ol>
+ <li><a href="/typekit-variations.html">Typekit with Multiple Variations</a></li>
+ </ol>
+
</body>
</html>
50 lib/webfontloader/demo/public/typekit-variations.html
View
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+ <link href="/basic.css" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="/webfont.js"></script>
+ <script type="text/javascript">
+ WebFont.load({
+ typekit: {
+ id: 'kitwithgeorgia',
+ api: '/typekit'
+ }
+ });
+ </script>
+ <style type="text/css">
+ /* Use classes to prove that Typekit triggers the event system correctly */
+ .georgia p {
+ font-family: 'Georgia';
+ font-size: 3em;
+ visibility: hidden;
+ }
+ .wf-georgia-i4-active #georgiaitalic {
+ visibility: visible;
+ }
+ .wf-georgia-i7-active #georgiabolditalic {
+ visibility: visible;
+ }
+ </style>
+</head>
+<body>
+ <div class="georgia">
+ <p id="georgiaitalic">
+ <em>Georgia Italic</em>
+ </p>
+ <p id="georgiabolditalic">
+ <strong><em>Georgia Bold Italic</em></strong>
+ </p>
+ </div>
+ <hr>
+ <p>
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
+ <a href="/typekit-variations.html">Reload Cached</a>
+ </p>
+ <p>
+ The goal of this page is to show how Typekit fonts load. Note that it uses
+ a minimal Typekit script in order to reduce dependencies. This script
+ simply provides the system font 'Georgia' in italic and bold italic
+ instead of loading a web font.
+ </p>
+</body>
+</html>
2  lib/webfontloader/demo/public/typekit.html
View
@@ -6,7 +6,7 @@
<script type="text/javascript">
WebFont.load({
typekit: {
- id: 'abc1def',
+ id: 'kitwitharialblack',
api: '/typekit'
}
});
13 lib/webfontloader/demo/server.rb
View
@@ -50,6 +50,17 @@ class Server < Sinatra::Base
get %r[/typekit/(\w+)\.js] do |kit_id|
headers 'Content-Type' => 'application/javascript'
headers 'Cache-Control' => 'max-age=300'
+ case kit_id
+ when "kitwitharialblack"
+ families = "['Arial Black']"
+ variations = "{}"
+ when "kitwithgeorgia"
+ families = "['Georgia']"
+ variations = "{ 'Georgia': ['i4', 'i7' ]}"
+ else
+ families = "[]"
+ variations = "{}"
+ end
<<-JS
if (window.__webfonttypekitmodule__) {
var module = window.__webfonttypekitmodule__['#{kit_id}'];
@@ -57,7 +68,7 @@ class Server < Sinatra::Base
module(function(userAgent, configuration, init) {
// Here you may use the userAgent object to determine
// browser support.
- init(true, ['Arial Black']);
+ init(true, #{families}, #{variations});
});
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.