webfontloader 1.0.31 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG +6 -0
- data/README.md +20 -3
- data/lib/webfontloader/demo/public/ascender-iframe.html +46 -0
- data/lib/webfontloader/demo/public/blank.html +9 -0
- data/lib/webfontloader/demo/public/custom-iframe.html +41 -0
- data/lib/webfontloader/demo/public/custom.html +10 -10
- data/lib/webfontloader/demo/public/google-iframe.html +40 -0
- data/lib/webfontloader/demo/public/index.html +15 -2
- data/lib/webfontloader/demo/public/monotype-iframe.html +46 -0
- data/lib/webfontloader/demo/public/typekit-iframe.html +41 -0
- data/lib/webfontloader/demo/public/typekit.html +7 -9
- data/lib/webfontloader.rb +1 -1
- data/src/ascender/ascender_script.js +2 -3
- data/src/core/domhelper.js +36 -4
- data/src/core/font.js +12 -6
- data/src/core/fontmoduleloader.js +2 -2
- data/src/core/initialize.js +2 -3
- data/src/custom/customcss.js +1 -2
- data/src/fontdeck/fontdeck_script.js +12 -10
- data/src/google/fontapiurlbuilder.js +1 -3
- data/src/google/googlefontapi.js +3 -4
- data/src/monotype/monotype_script.js +8 -25
- data/src/typekit/typekit_script.js +9 -10
- data/src-test/ascender/ascender_script_test.js +3 -0
- data/src-test/core/domhelpertest.js +44 -1
- data/src-test/core/eventdispatchertest.js +1 -1
- data/src-test/core/fonttest.js +53 -28
- data/src-test/fontdeck/fontdeck_script_test.js +26 -16
- data/src-test/google/fontapiurlbuildertest.js +5 -5
- data/src-test/google/googlefontapitest.js +12 -0
- data/src-test/monotype/monotype_script_test.js +36 -62
- data/src-test/typekit/typekit_script_test.js +30 -6
- data/webfontloader.gemspec +8 -2
- metadata +10 -4
data/CHANGELOG
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
v1.1.0 (December 5, 2012)
|
|
2
|
+
* Adds the ability to load fonts into a same-origin child window or iframe using the new optional `context` configuration option (thanks to @ryanwolf of Google).
|
|
3
|
+
* Updates the demos to fix broken stuff and demonstrate the new context option in action.
|
|
4
|
+
* DomHelper interface changed to take the main window and an optional separate window for loading.
|
|
5
|
+
* Methods added to retrieve both windows and get the correct protocol for assets from the location's protocol.
|
|
6
|
+
|
|
1
7
|
v1.0.31 (September 11, 2012)
|
|
2
8
|
* Improvements to Google's module to recognize more variation descriptor formats (such as 100italic and 200n).
|
|
3
9
|
|
data/README.md
CHANGED
|
@@ -67,12 +67,29 @@ this.
|
|
|
67
67
|
|
|
68
68
|
Learn more about [events][evt].
|
|
69
69
|
|
|
70
|
+
## Manage loading everywhere
|
|
71
|
+
|
|
72
|
+
Usually, it's easiest to include a copy of webfontloader in every window where
|
|
73
|
+
fonts are needed, so that each window manages its own fonts. However, if you
|
|
74
|
+
need to have a single window manage fonts for multiple same-origin child windows
|
|
75
|
+
or iframes that are built up using JavaScript, webfontloader supports that as
|
|
76
|
+
well. Just use the optional `context` configuration option and give it a
|
|
77
|
+
reference to the target window for loading:
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
WebFont.load({
|
|
81
|
+
google: {
|
|
82
|
+
families: ['Droid Sans']
|
|
83
|
+
},
|
|
84
|
+
context: frames['my-child']
|
|
85
|
+
});
|
|
86
|
+
</script>
|
|
70
87
|
|
|
71
88
|
## A common ground
|
|
72
89
|
|
|
73
90
|
WebFont Loader aims to provide a common interface for font loading. Today it
|
|
74
|
-
works with Google, Typekit, Fonts.com Web fonts and your own
|
|
75
|
-
[transitions][trn].
|
|
91
|
+
works with Google, Typekit, Ascender, Fontdeck, Fonts.com Web fonts and your own
|
|
92
|
+
CSS. Learn more in [transitions][trn].
|
|
76
93
|
|
|
77
94
|
|
|
78
95
|
## More to see
|
|
@@ -125,11 +142,11 @@ Then, run the tests.
|
|
|
125
142
|
* That's it!
|
|
126
143
|
|
|
127
144
|
|
|
128
|
-
|
|
129
145
|
## Authors
|
|
130
146
|
|
|
131
147
|
* Ryan Carver / ryan@typekit.com
|
|
132
148
|
* Jeremie Lenfant-engelmann / jeremiele@google.com
|
|
149
|
+
* Sean McBride / sean@typekit.com
|
|
133
150
|
|
|
134
151
|
|
|
135
152
|
## License
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Ascender Module Demo</title>
|
|
5
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
6
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
7
|
+
<style type="text/css">
|
|
8
|
+
iframe {
|
|
9
|
+
height: 100px;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<script type="text/javascript">
|
|
16
|
+
function loaded() {
|
|
17
|
+
var child = frames["child"];
|
|
18
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'AyitaPro'\">Hello World. I am Ayita Pro.</h1>";
|
|
19
|
+
WebFont.load({
|
|
20
|
+
ascender: {
|
|
21
|
+
key:'ec2de397-11ae-4c10-937f-bf94283a70c1',
|
|
22
|
+
families:['AyitaPro:regular,bold,bolditalic,italic']
|
|
23
|
+
},
|
|
24
|
+
context: child
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
30
|
+
|
|
31
|
+
<hr>
|
|
32
|
+
|
|
33
|
+
<p>
|
|
34
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
35
|
+
<a href="/ascender.html">Reload Cached</a>
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
Note: use "localhost" when testing web fonts.
|
|
39
|
+
</p>
|
|
40
|
+
<p>
|
|
41
|
+
The goal of this page is to show how fonts load from Ascender in a child
|
|
42
|
+
iframe.
|
|
43
|
+
</p>
|
|
44
|
+
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Custom Module</title>
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<style >
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'ChunkFiveRegular'\">Hello World. I am ChunkFive.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
custom: {
|
|
20
|
+
families: ['ChunkFiveRegular'],
|
|
21
|
+
urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
|
|
22
|
+
},
|
|
23
|
+
context: child
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
29
|
+
|
|
30
|
+
<hr>
|
|
31
|
+
<p>
|
|
32
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
<a href="/custom.html">Reload Cached</a>
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
The goal of this page is to show how fonts load from a custom module in a
|
|
37
|
+
child iframe.
|
|
38
|
+
</p>
|
|
39
|
+
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style type="text/css">
|
|
7
7
|
|
|
8
8
|
h1 {
|
|
9
|
-
font-family: '
|
|
9
|
+
font-family: 'ChunkFiveRegular';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
/* All Class hooks */
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
html.wf-loading #classes .Loading,
|
|
15
15
|
html.wf-active #classes .Active,
|
|
16
16
|
html.wf-inactive #classes .Inactive,
|
|
17
|
-
html.wf-
|
|
18
|
-
html.wf-
|
|
19
|
-
html.wf-
|
|
17
|
+
html.wf-chunkfiveregular-n4-loading #classes .ChunkFiveLoading,
|
|
18
|
+
html.wf-chunkfiveregular-n4-active #classes .ChunkFiveActive,
|
|
19
|
+
html.wf-chunkfiveregular-n4-inactive #classes .ChunkFiveInactive {
|
|
20
20
|
color: #000;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
</head>
|
|
25
25
|
<body>
|
|
26
26
|
<h1 class="tagesschrift">
|
|
27
|
-
Hello World. I am
|
|
27
|
+
Hello World. I am ChunkFive.
|
|
28
28
|
</h1>
|
|
29
29
|
<hr>
|
|
30
30
|
<p>
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
<li class="Loading">Loading</li>
|
|
40
40
|
<li class="Active">Active</li>
|
|
41
41
|
<li class="Inactive">Inactive</li>
|
|
42
|
-
<li class="
|
|
43
|
-
<li class="
|
|
44
|
-
<li class="
|
|
42
|
+
<li class="ChunkFiveLoading">ChunkFive Loading</li>
|
|
43
|
+
<li class="ChunkFiveActive">ChunkFive Active</li>
|
|
44
|
+
<li class="ChunkFiveInactive">ChunkFive Inactive</li>
|
|
45
45
|
</ul>
|
|
46
46
|
<h2>JavaScript Event Progress</h2>
|
|
47
47
|
<ol id="events"></ol>
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
}
|
|
62
62
|
WebFont.load({
|
|
63
63
|
custom: {
|
|
64
|
-
families: ['
|
|
65
|
-
urls : ['http://
|
|
64
|
+
families: ['ChunkFiveRegular'],
|
|
65
|
+
urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
|
|
66
66
|
},
|
|
67
67
|
loading: function() {
|
|
68
68
|
progress('loading');
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<style type="text/css">
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'Droid Sans'\">Hello World. I am Droid Sans.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
google: {
|
|
20
|
+
families: ['Droid Sans'],
|
|
21
|
+
api: '/fonts/api'
|
|
22
|
+
},
|
|
23
|
+
context: child
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
29
|
+
|
|
30
|
+
<hr>
|
|
31
|
+
<p>
|
|
32
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
<a href="/google.html">Reload Cached</a>
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
The goal of this page is demonstrate fonts loading from Google via
|
|
37
|
+
Javascript into a child iframe.
|
|
38
|
+
</p>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<h2>Modules</h2>
|
|
18
18
|
<p>
|
|
19
|
-
WebFont Loader provides modules to load fonts from many places.
|
|
19
|
+
WebFont Loader provides modules to load fonts from many places.
|
|
20
20
|
</p>
|
|
21
21
|
<ol>
|
|
22
22
|
<li><a href="/google-css.html">Google / CSS Link</a>: Load fonts from Google with a <code>link</code> tag. Consider this a base case for font loading.</li>
|
|
@@ -25,7 +25,20 @@
|
|
|
25
25
|
<li><a href="/custom.html">Custom / WebFont Loader</a>: Load fonts from your own CSS with WebFont Loader.</li>
|
|
26
26
|
<li><a href="/ascender.html">Ascender / WebFont Loader</a>: Load fonts from Ascender with WebFont Loader.</li>
|
|
27
27
|
<li><a href="/fontdeck.html">Fontdeck / WebFont Loader</a>: Load fonts from Fontdeck with WebFont Loader.</li>
|
|
28
|
-
<li><a href="/monotype.html">
|
|
28
|
+
<li><a href="/monotype.html">Monotype / WebFont Loader</a>: Load fonts from webfonts.fonts.com with WebFont Loader.</li>
|
|
29
|
+
</ol>
|
|
30
|
+
|
|
31
|
+
<h2>Modules in Iframes</h2>
|
|
32
|
+
<p>
|
|
33
|
+
WebFont Loader provides the ability to load fonts in child iframes using modules, instead of the main window.
|
|
34
|
+
</p>
|
|
35
|
+
<ol>
|
|
36
|
+
<li><a href="/google-iframe.html">Google / WebFont Loader</a>: Load fonts from Google in a child iframe with WebFont Loader.</li>
|
|
37
|
+
<li><a href="/typekit-iframe.html">Typekit / WebFont Loader</a>: Load fonts from Typekit in a child iframe with WebFont Loader.</li>
|
|
38
|
+
<li><a href="/custom-iframe.html">Custom / WebFont Loader</a>: Load fonts from your own CSS in a child iframe with WebFont Loader.</li>
|
|
39
|
+
<li><a href="/ascender-iframe.html">Ascender / WebFont Loader</a>: Load fonts from Ascender in a child iframe with WebFont Loader.</li>
|
|
40
|
+
<li>Fontdeck / WebFont Loader: Their demo fonts seem to be broken at the moment, so we don't have an iframe demo of this module.</li>
|
|
41
|
+
<li><a href="/monotype-iframe.html">Monotype / WebFont Loader</a>: Load fonts from webfonts.fonts.com in a child iframe with WebFont Loader.</li>
|
|
29
42
|
</ol>
|
|
30
43
|
|
|
31
44
|
<h2>Events</h2>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<style>
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
frames["child"].document.body.innerHTML = "<h1>Hello World. I am DIN Next Bold.</h1>";
|
|
17
|
+
WebFont.load({
|
|
18
|
+
monotype: {
|
|
19
|
+
projectId: 'b726c28f-a28a-45be-993f-3db719bacfab'
|
|
20
|
+
},
|
|
21
|
+
context: frames["child"]
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
27
|
+
|
|
28
|
+
<hr>
|
|
29
|
+
|
|
30
|
+
<p>
|
|
31
|
+
|
|
32
|
+
<a href="#" onClick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
|
|
34
|
+
<a href="/monotype.html">Reload Cached</a>
|
|
35
|
+
|
|
36
|
+
</p>
|
|
37
|
+
|
|
38
|
+
<p>
|
|
39
|
+
The goal of this page is to show how monotype fonts load in a child iframe.
|
|
40
|
+
</p>
|
|
41
|
+
|
|
42
|
+
<p>
|
|
43
|
+
You must use "localhost" when testing monotype fonts.
|
|
44
|
+
</p>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<style type="text/css">
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1>Hello World. I am Futura PT.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
typekit: {
|
|
20
|
+
id: 'bod7grh'
|
|
21
|
+
},
|
|
22
|
+
context: child
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
28
|
+
|
|
29
|
+
<hr>
|
|
30
|
+
<p>
|
|
31
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
32
|
+
<a href="/typekit.html">Reload Cached</a>
|
|
33
|
+
</p>
|
|
34
|
+
<p>
|
|
35
|
+
The goal of this page is to show how Typekit fonts load into an iframe.
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
You must load the fonts on "localhost" for this demo to work.
|
|
39
|
+
</p>
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
<script type="text/javascript">
|
|
7
7
|
WebFont.load({
|
|
8
8
|
typekit: {
|
|
9
|
-
id: '
|
|
10
|
-
api: '/typekit'
|
|
9
|
+
id: 'bod7grh'
|
|
11
10
|
}
|
|
12
11
|
});
|
|
13
12
|
</script>
|
|
@@ -16,15 +15,14 @@
|
|
|
16
15
|
h1 {
|
|
17
16
|
visibility: hidden;
|
|
18
17
|
}
|
|
19
|
-
.wf-
|
|
20
|
-
font-family: 'Arial Black';
|
|
18
|
+
.wf-futurapt-n7-active h1 {
|
|
21
19
|
visibility: visible;
|
|
22
20
|
}
|
|
23
21
|
</style>
|
|
24
22
|
</head>
|
|
25
23
|
<body>
|
|
26
24
|
<h1>
|
|
27
|
-
Hello World. I am
|
|
25
|
+
Hello World. I am Futura PT.
|
|
28
26
|
</h1>
|
|
29
27
|
<hr>
|
|
30
28
|
<p>
|
|
@@ -32,10 +30,10 @@
|
|
|
32
30
|
<a href="/typekit.html">Reload Cached</a>
|
|
33
31
|
</p>
|
|
34
32
|
<p>
|
|
35
|
-
The goal of this page is to show how Typekit fonts load.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
The goal of this page is to show how Typekit fonts load.
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
You must load this page on "localhost" in order for the fonts to load.
|
|
39
37
|
</p>
|
|
40
38
|
</body>
|
|
41
39
|
</html>
|
data/lib/webfontloader.rb
CHANGED
|
@@ -33,7 +33,7 @@ webfont.AscenderScript.prototype.supportUserAgent = function(userAgent, support)
|
|
|
33
33
|
|
|
34
34
|
webfont.AscenderScript.prototype.load = function(onReady) {
|
|
35
35
|
var key = this.configuration_['key'];
|
|
36
|
-
var protocol =
|
|
36
|
+
var protocol = this.domHelper_.getProtocol();
|
|
37
37
|
var url = protocol + '//webfonts.fontslive.com/css/' + key + '.css';
|
|
38
38
|
this.domHelper_.insertInto('head', this.domHelper_.createCssLink(url));
|
|
39
39
|
var fv = this.parseFamiliesAndVariations(this.configuration_['families']);
|
|
@@ -78,7 +78,6 @@ webfont.AscenderScript.prototype.parseVariations = function(source){
|
|
|
78
78
|
return variations;
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
globalNamespaceObject.addModule(webfont.AscenderScript.NAME, function(configuration) {
|
|
82
|
-
var domHelper = new webfont.DomHelper(document);
|
|
81
|
+
globalNamespaceObject.addModule(webfont.AscenderScript.NAME, function(configuration, domHelper) {
|
|
83
82
|
return new webfont.AscenderScript(domHelper, configuration);
|
|
84
83
|
});
|