Permalink
Switch branches/tags
Nothing to show
Find file Copy path
70cac38 Feb 16, 2015
0 contributors

Users who have contributed to this file

123 lines (112 sloc) 7.93 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How Filament Group Loads Web Fonts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/demo-head/demohead.css">
<style>
@font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-lightit-webfont.woff2') format('woff2'),
url('fonts/sourcesanspro-lightit-webfont.woff') format('woff'),
url('fonts/sourcesanspro-lightit-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
url('fonts/sourcesanspro-light-webfont.woff') format('woff'),
url('fonts/sourcesanspro-light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'),
url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: Source Sans Pro, sans-serif;
}
</style>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Font Loading</span>
<span class="description">Progressively rendered font loading</span>
</h1>
<ul class="outbound-links">
<li><a href="http://www.filamentgroup.com/lab/font-loading.html">Blog Post</a></li>
<li><a href="https://github.com/filamentgroup/font-loading">Code</a></li>
<li><a href="https://github.com/filamentgroup/font-loading/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="data-uris.html">Data URIs</a>
<a href="data-uris-cookie.html">Data URIs with Cookies</a>
<a href="font-events.html" class="current">Font Events <strong>*Recommended*</strong></a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Font Loading using Font Events</h2>
<p>This demo is from a <a href="http://www.filamentgroup.com/lab/font-events.html">followup article</a> to our initial article on font loading. </p>
<p>This is sample text that should show while the remote web font is loading.</p>
<p>Continue reading <a href="http://www.filamentgroup.com/lab/font-events.html">Font Loading Revisited with Font Events</a>.</p>
</div>
<script>
/* fontfaceobserver Copyright (c) 2014 - Bram Stein https://github.com/bramstein/fontfaceobserver/*/
(function(){'use strict';function f(a){this.a=k;this.b=void 0;this.d=[];var b=this;try{a(function(a){l(b,a)},function(a){m(b,a)})}catch(c){m(b,c)}}var k=2;function n(a){return new f(function(b,c){c(a)})}function p(a){return new f(function(b){b(a)})}
function l(a,b){if(a.a===k){if(b===a)throw new TypeError("Promise resolved with itself.");var c=!1;try{var d=b&&b.then;if(null!==b&&"object"===typeof b&&"function"===typeof d){d.call(b,function(b){c||l(a,b);c=!0},function(b){c||m(a,b);c=!0});return}}catch(e){c||m(a,e);return}a.a=0;a.b=b;q(a)}}function m(a,b){if(a.a===k){if(b===a)throw new TypeError("Promise rejected with itself.");a.a=1;a.b=b;q(a)}}
function q(a){setTimeout(function(){if(a.a!==k)for(;a.d.length;){var b=a.d.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0===a.a?"function"===typeof c?e(c.call(void 0,a.b)):e(a.b):1===a.a&&("function"===typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(g){b(g)}}},0)}f.prototype.e=function(a){return this.c(void 0,a)};f.prototype.c=function(a,b){var c=this;return new f(function(d,e){c.d.push([a,b,d,e]);q(c)})};
function r(a){return new f(function(b,c){function d(c){return function(d){g[c]=d;e+=1;e===a.length&&b(g)}}var e=0,g=[];0===a.length&&b(g);for(var h=0;h<a.length;h+=1)a[h].c(d(h),c)})}function s(a){return new f(function(b,c){for(var d=0;d<a.length;d+=1)a[d].c(b,c)})};window.Promise||(window.Promise=f,window.Promise.resolve=p,window.Promise.reject=n,window.Promise.race=s,window.Promise.all=r,window.Promise.prototype.then=f.prototype.c,window.Promise.prototype["catch"]=f.prototype.e);}());
(function(){'use strict';function e(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.f=document.createElement("span");this.e=document.createElement("span");this.d=-1;this.b.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.c.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";
this.e.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.f.style.cssText="display:inline-block;width:200%;height:200%;";this.b.appendChild(this.f);this.c.appendChild(this.e);this.a.appendChild(this.b);this.a.appendChild(this.c)}function r(a,b,c){a.a.style.cssText="min-width:20px;min-height:20px;display:inline-block;visibility:hidden;position:absolute;width:auto;margin:0;padding:0;top:0;white-space:nowrap;font-size:100px;font-family:"+b+";"+c}
function s(a){var b=a.a.offsetWidth,c=b+100;a.e.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.d!==b?(a.d=b,!0):!1}function t(a,b){a.b.addEventListener("scroll",function(){s(a)&&null!==a.a.parentNode&&b(a.d)},!1);a.c.addEventListener("scroll",function(){s(a)&&null!==a.a.parentNode&&b(a.d)},!1);s(a)};function u(a,b){this.family=a;this.style=b.style||"normal";this.variant=b.variant||"normal";this.weight=b.weight||"normal";this.stretch=b.stretch||"stretch";this.featureSettings=b.featureSettings||"normal"}var v=null;
u.prototype.a=function(a){a=a||"BESbswy";var b="font-style:"+this.style+";font-variant:"+this.variant+";font-weight:"+this.weight+";font-stretch:"+this.stretch+";font-feature-settings:"+this.featureSettings+";-moz-font-feature-settings:"+this.featureSettings+";-webkit-font-feature-settings:"+this.featureSettings+";",c=document.createElement("div"),k=new e(a),l=new e(a),m=new e(a),f=-1,d=-1,g=-1,n=-1,p=-1,q=-1,h=this;r(k,"sans-serif",b);r(l,"serif",b);r(m,"monospace",b);c.appendChild(k.a);c.appendChild(l.a);
c.appendChild(m.a);document.body.appendChild(c);n=k.a.offsetWidth;p=l.a.offsetWidth;q=m.a.offsetWidth;return new Promise(function(a,y){function w(){null!==c.parentNode&&document.body.removeChild(c)}function x(){if(-1!==f&&-1!==d&&-1!==g&&f===d&&d===g){if(null===v){var b=/AppleWeb[kK]it\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);v=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))}v?f===n&&d===n&&g===n||f===p&&d===p&&g===p||f===q&&d===q&&g===q||(w(),a(h)):(w(),
a(h))}}setTimeout(function(){w();y(h)},3E3);t(k,function(a){f=a;x()});r(k,h.family+",sans-serif",b);t(l,function(a){d=a;x()});r(l,h.family+",serif",b);t(m,function(a){g=a;x()});r(m,h.family+",monospace",b)})};window.FontFaceObserver=u;window.FontFaceObserver.prototype.check=u.prototype.a;}());
/*
Fonts are loaded through @font-face rules in the CSS whenever an element references them.
FontFaceObserver creates a referencing element to trigger the font request, and lsisten for font load events.
When all 3 fonts are loaded, we enable them by adding a class to the html element
*/
(function( w ){
// if the class is already set, we're good.
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var fontA = new w.FontFaceObserver( "Source Sans Pro", {
weight: 300
});
var fontB = new w.FontFaceObserver( "Source Sans Pro", {
weight: 600
});
var fontC = new w.FontFaceObserver( "Source Sans Pro", {
weight: 300,
style: "italic"
});
w.Promise
.all([fontA.check(), fontB.check(), fontC.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script>
</body>
</html>