Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #71 from typekit/rw-iframe-support
Support for loading fonts in child iframes and windows
- Loading branch information
Showing
30 changed files
with
573 additions
and
215 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Ascender Module Demo</title> | ||
| <link href="/basic.css" rel="stylesheet" type="text/css"> | ||
| <script type="text/javascript" src="/webfont.js"></script> | ||
| <style type="text/css"> | ||
| iframe { | ||
| height: 100px; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| function loaded() { | ||
| var child = frames["child"]; | ||
| child.document.body.innerHTML = "<h1 style=\"font-family: 'AyitaPro'\">Hello World. I am Ayita Pro.</h1>"; | ||
| WebFont.load({ | ||
| ascender: { | ||
| key:'ec2de397-11ae-4c10-937f-bf94283a70c1', | ||
| families:['AyitaPro:regular,bold,bolditalic,italic'] | ||
| }, | ||
| context: child | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <iframe name="child" src="/blank.html" onload="loaded()"></iframe> | ||
|
|
||
| <hr> | ||
|
|
||
| <p> | ||
| <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | | ||
| <a href="/ascender.html">Reload Cached</a> | ||
| </p> | ||
| <p> | ||
| Note: use "localhost" when testing web fonts. | ||
| </p> | ||
| <p> | ||
| The goal of this page is to show how fonts load from Ascender in a child | ||
| iframe. | ||
| </p> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | ||
| <title>Blank page</title> | ||
| </head> | ||
| <body> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Custom Module</title> | ||
| <script type="text/javascript" src="/webfont.js"></script> | ||
| <style > | ||
| iframe { | ||
| height: 100px; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| function loaded() { | ||
| var child = frames["child"]; | ||
| child.document.body.innerHTML = "<h1 style=\"font-family: 'ChunkFiveRegular'\">Hello World. I am ChunkFive.</h1>"; | ||
| WebFont.load({ | ||
| custom: { | ||
| families: ['ChunkFiveRegular'], | ||
| urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css'] | ||
| }, | ||
| context: child | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <iframe name="child" src="/blank.html" onload="loaded()"></iframe> | ||
|
|
||
| <hr> | ||
| <p> | ||
| <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | | ||
| <a href="/custom.html">Reload Cached</a> | ||
| </p> | ||
| <p> | ||
| The goal of this page is to show how fonts load from a custom module in a | ||
| child iframe. | ||
| </p> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <link href="/basic.css" rel="stylesheet" type="text/css"> | ||
| <script type="text/javascript" src="/webfont.js"></script> | ||
| <style type="text/css"> | ||
| iframe { | ||
| height: 100px; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| function loaded() { | ||
| var child = frames["child"]; | ||
| child.document.body.innerHTML = "<h1 style=\"font-family: 'Droid Sans'\">Hello World. I am Droid Sans.</h1>"; | ||
| WebFont.load({ | ||
| google: { | ||
| families: ['Droid Sans'], | ||
| api: '/fonts/api' | ||
| }, | ||
| context: child | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <iframe name="child" src="/blank.html" onload="loaded()"></iframe> | ||
|
|
||
| <hr> | ||
| <p> | ||
| <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | | ||
| <a href="/google.html">Reload Cached</a> | ||
| </p> | ||
| <p> | ||
| The goal of this page is demonstrate fonts loading from Google via | ||
| Javascript into a child iframe. | ||
| </p> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <link href="/basic.css" rel="stylesheet" type="text/css"> | ||
| <script type="text/javascript" src="/webfont.js"></script> | ||
| <style> | ||
| iframe { | ||
| height: 100px; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| function loaded() { | ||
| frames["child"].document.body.innerHTML = "<h1>Hello World. I am DIN Next Bold.</h1>"; | ||
| WebFont.load({ | ||
| monotype: { | ||
| projectId: 'b726c28f-a28a-45be-993f-3db719bacfab' | ||
| }, | ||
| context: frames["child"] | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <iframe name="child" src="/blank.html" onload="loaded()"></iframe> | ||
|
|
||
| <hr> | ||
|
|
||
| <p> | ||
|
|
||
| <a href="#" onClick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | | ||
|
|
||
| <a href="/monotype.html">Reload Cached</a> | ||
|
|
||
| </p> | ||
|
|
||
| <p> | ||
| The goal of this page is to show how monotype fonts load in a child iframe. | ||
| </p> | ||
|
|
||
| <p> | ||
| You must use "localhost" when testing monotype fonts. | ||
| </p> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <link href="/basic.css" rel="stylesheet" type="text/css"> | ||
| <script type="text/javascript" src="/webfont.js"></script> | ||
| <style type="text/css"> | ||
| iframe { | ||
| height: 100px; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| function loaded() { | ||
| var child = frames["child"]; | ||
| child.document.body.innerHTML = "<h1>Hello World. I am Futura PT.</h1>"; | ||
| WebFont.load({ | ||
| typekit: { | ||
| id: 'bod7grh' | ||
| }, | ||
| context: child | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <iframe name="child" src="/blank.html" onload="loaded()"></iframe> | ||
|
|
||
| <hr> | ||
| <p> | ||
| <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | | ||
| <a href="/typekit.html">Reload Cached</a> | ||
| </p> | ||
| <p> | ||
| The goal of this page is to show how Typekit fonts load into an iframe. | ||
| </p> | ||
| <p> | ||
| You must load the fonts on "localhost" for this demo to work. | ||
| </p> | ||
| </body> | ||
| </html> |
Oops, something went wrong.