zachleat · September 7, 2017 04:12 · May 2, 2017 · Jul 13, 2016 · Jul 13, 2016
diff --git a/foft.html b/foft.html
@@ -91,6 +91,6 @@
 </head>
 <body>
 	<h1>FOFT, or FOUT with Two Stage Render</h1>
-	<p>This is a paragraph. <strong>This is heavier text.</strong> <em>This is emphasized text.</em> <strong><em>This is heavier and emphasized text.</em></p>
+	<p>This is a paragraph. <strong>This is heavier text.</strong> <em>This is emphasized text.</em> <strong><em>This is heavier and emphasized text.</em></strong></p>
 </body>
 </html>
diff --git a/foft.html b/foft.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>FOUT with a Class</title>
+	<title>FOFT, or FOUT with Two Stage Render</title>
 	<style>
 	@font-face {
 		font-family: Lato;
@@ -38,21 +38,21 @@
 	body {
 		font-family: sans-serif;
 	}
-	.fonts-loaded body {
+	.fonts-stage-1 body {
 		font-family: Lato, sans-serif;
 		font-weight: 400;
 		font-style: normal;
 	}
-	.fonts-loaded strong {
+	.fonts-stage-2 strong {
 		font-family: LatoBold, sans-serif;
 		font-weight: 700;
 	}
-	.fonts-loaded em {
+	.fonts-stage-2 em {
 		font-family: LatoItalic, sans-serif;
 		font-style: italic;
 	}
-	.fonts-loaded strong em,
+	.fonts-stage-2 strong em,
-	.fonts-loaded em strong {
+	.fonts-stage-2 em strong {
 		font-family: LatoBoldItalic, sans-serif;
 		font-weight: 700;
 		font-style: italic;
@@ -62,30 +62,35 @@
 	(function() {
 
 		// Optimization for Repeat Views
-		if( sessionStorage.foutFontsLoaded ) {
+		if( sessionStorage.foftFontsLoaded ) {
-			document.documentElement.className += " fonts-loaded";
+			document.documentElement.className += " fonts-stage-1 fonts-stage-2";
 			return;
 		}
 
 		// FontFaceObserver https://github.com/bramstein/fontfaceobserver
 		(function(){function e(e,t){document.addEventListener?e.addEventListener("scroll",t,!1):e.attachEvent("scroll",t)}function t(e){document.body?e():document.addEventListener?document.addEventListener("DOMContentLoaded",function t(){document.removeEventListener("DOMContentLoaded",t),e()}):document.attachEvent("onreadystatechange",function n(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",n),e()})}function n(e){this.a=document.createElement("div"),this.a.setAttribute("aria-hidden","true"),this.a.appendChild(document.createTextNode(e)),this.b=document.createElement("span"),this.c=document.createElement("span"),this.h=document.createElement("span"),this.f=document.createElement("span"),this.g=-1,this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;",this.b.appendChild(this.h),this.c.appendChild(this.f),this.a.appendChild(this.b),this.a.appendChild(this.c)}function r(e,t){e.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+t+";"}function i(e){var t=e.a.offsetWidth,n=t+100;return e.f.style.width=n+"px",e.c.scrollLeft=n,e.b.scrollLeft=e.b.scrollWidth+100,e.g!==t?(e.g=t,!0):!1}function s(t,n){function r(){var e=s;i(e)&&null!==e.a.parentNode&&n(e.g)}var s=t;e(t.b,r),e(t.c,r),i(t)}function o(e,t){var n=t||{};this.family=e,this.style=n.style||"normal",this.weight=n.weight||"normal",this.stretch=n.stretch||"normal"}function l(){if(null===a){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(t){}a=""!==e.style.font}return a}function c(e,t){return[e.style,e.weight,l()?e.stretch:"","100px",t].join(" ")}var u=null,a=null,f=null;o.prototype.load=function(e,i){var o=this,a=e||"BESbswy",l=i||3e3,h=(new Date).getTime();return new Promise(function(e,i){null===f&&(f=!!window.FontFace);if(f){var p=new Promise(function(e,t){function n(){(new Date).getTime()-h>=l?t():document.fonts.load(c(o,o.family),a).then(function(t){1<=t.length?e():setTimeout(n,25)},function(){t()})}n()}),d=new Promise(function(e,t){setTimeout(t,l)});Promise.race([d,p]).then(function(){e(o)},function(){i(o)})}else t(function(){function t(){var t;if(t=-1!=m&&-1!=g||-1!=m&&-1!=S||-1!=g&&-1!=S)(t=m!=g&&m!=S&&g!=S)||(null===u&&(t=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),u=!!t&&(536>parseInt(t[1],10)||536===parseInt(t[1],10)&&11>=parseInt(t[2],10))),t=u&&(m==x&&g==x&&S==x||m==T&&g==T&&S==T||m==N&&g==N&&S==N)),t=!t;t&&(null!==C.parentNode&&C.parentNode.removeChild(C),clearTimeout(L),e(o))}function f(){if((new Date).getTime()-h>=l)null!==C.parentNode&&C.parentNode.removeChild(C),i(o);else{var e=document.hidden;if(!0===e||void 0===e)m=p.a.offsetWidth,g=d.a.offsetWidth,S=v.a.offsetWidth,t();L=setTimeout(f,50)}}var p=new n(a),d=new n(a),v=new n(a),m=-1,g=-1,S=-1,x=-1,T=-1,N=-1,C=document.createElement("div"),L=0;C.dir="ltr",r(p,c(o,"sans-serif")),r(d,c(o,"serif")),r(v,c(o,"monospace")),C.appendChild(p.a),C.appendChild(d.a),C.appendChild(v.a),document.body.appendChild(C),x=p.a.offsetWidth,T=d.a.offsetWidth,N=v.a.offsetWidth,f(),s(p,function(e){m=e,t()}),r(p,c(o,'"'+o.family+'",sans-serif')),s(d,function(e){g=e,t()}),r(d,c(o,'"'+o.family+'",serif')),s(v,function(e){S=e,t()}),r(v,c(o,'"'+o.family+'",monospace'))})})},"undefined"!=typeof module?module.exports=o:(window.FontFaceObserver=o,window.FontFaceObserver.prototype.load=o.prototype.load)})();
 
 		var fontA = new FontFaceObserver('Lato');
-		var fontB = new FontFaceObserver('LatoBold');
-		var fontC = new FontFaceObserver('LatoItalic');
-		var fontD = new FontFaceObserver('LatoBoldItalic');
 
-		Promise.all([fontA.load(), fontB.load(), fontC.load(), fontD.load()]).then(function () {
+		Promise.all([fontA.load()]).then(function () {
-			document.documentElement.className += " fonts-loaded";
+			document.documentElement.className += " fonts-stage-1";
 
-			// Optimization for Repeat Views
+			var fontB = new FontFaceObserver('LatoBold');
-			sessionStorage.foutFontsLoaded = true;
+			var fontC = new FontFaceObserver('LatoItalic');
+			var fontD = new FontFaceObserver('LatoBoldItalic');
+
+			Promise.all([fontB.load(), fontC.load(), fontD.load()]).then(function () {
+				document.documentElement.className += " fonts-stage-2";
+
+				// Optimization for Repeat Views
+				sessionStorage.foftFontsLoaded = true;
+			});
 		});
 	})();
 	</script>
 </head>
 <body>
-	<h1>FOUT with a Class</h1>
+	<h1>FOFT, or FOUT with Two Stage Render</h1>
 	<p>This is a paragraph. <strong>This is heavier text.</strong> <em>This is emphasized text.</em> <strong><em>This is heavier and emphasized text.</em></p>
 </body>
 </html>
diff --git a/foft.html b/foft.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>FOUT with a Class</title>
+	<style>
+	@font-face {
+		font-family: Lato;
+		src: url('/web/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'),
+				 url('/web/css/fonts/lato/lato-regular-webfont.woff') format('woff');
+		font-weight: 400;
+		font-style: normal;
+	}
+	@font-face {
+		font-family: LatoBold;
+		src: url('/web/css/fonts/lato/lato-bold-webfont.woff2') format('woff2'),
+				 url('/web/css/fonts/lato/lato-bold-webfont.woff') format('woff');
+		font-weight: 700;
+		font-style: normal;
+	}
+
+	@font-face {
+		font-family: LatoItalic;
+		src: url('/web/css/fonts/lato/lato-italic-webfont.woff2') format('woff2'),
+				 url('/web/css/fonts/lato/lato-italic-webfont.woff') format('woff');
+		font-weight: 400;
+		font-style: italic;
+	}
+
+	@font-face {
+		font-family: LatoBoldItalic;
+		src: url('/web/css/fonts/lato/lato-bolditalic-webfont.woff2') format('woff2'),
+				 url('/web/css/fonts/lato/lato-bolditalic-webfont.woff') format('woff');
+		font-weight: 700;
+		font-style: italic;
+	}
+	body {
+		font-family: sans-serif;
+	}
+	.fonts-loaded body {
+		font-family: Lato, sans-serif;
+		font-weight: 400;
+		font-style: normal;
+	}
+	.fonts-loaded strong {
+		font-family: LatoBold, sans-serif;
+		font-weight: 700;
+	}
+	.fonts-loaded em {
+		font-family: LatoItalic, sans-serif;
+		font-style: italic;
+	}
+	.fonts-loaded strong em,
+	.fonts-loaded em strong {
+		font-family: LatoBoldItalic, sans-serif;
+		font-weight: 700;
+		font-style: italic;
+	}
+	</style>
+	<script>
+	(function() {
+
+		// Optimization for Repeat Views
+		if( sessionStorage.foutFontsLoaded ) {
+			document.documentElement.className += " fonts-loaded";
+			return;
+		}
+
+		// FontFaceObserver https://github.com/bramstein/fontfaceobserver
+		(function(){function e(e,t){document.addEventListener?e.addEventListener("scroll",t,!1):e.attachEvent("scroll",t)}function t(e){document.body?e():document.addEventListener?document.addEventListener("DOMContentLoaded",function t(){document.removeEventListener("DOMContentLoaded",t),e()}):document.attachEvent("onreadystatechange",function n(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",n),e()})}function n(e){this.a=document.createElement("div"),this.a.setAttribute("aria-hidden","true"),this.a.appendChild(document.createTextNode(e)),this.b=document.createElement("span"),this.c=document.createElement("span"),this.h=document.createElement("span"),this.f=document.createElement("span"),this.g=-1,this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;",this.b.appendChild(this.h),this.c.appendChild(this.f),this.a.appendChild(this.b),this.a.appendChild(this.c)}function r(e,t){e.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+t+";"}function i(e){var t=e.a.offsetWidth,n=t+100;return e.f.style.width=n+"px",e.c.scrollLeft=n,e.b.scrollLeft=e.b.scrollWidth+100,e.g!==t?(e.g=t,!0):!1}function s(t,n){function r(){var e=s;i(e)&&null!==e.a.parentNode&&n(e.g)}var s=t;e(t.b,r),e(t.c,r),i(t)}function o(e,t){var n=t||{};this.family=e,this.style=n.style||"normal",this.weight=n.weight||"normal",this.stretch=n.stretch||"normal"}function l(){if(null===a){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(t){}a=""!==e.style.font}return a}function c(e,t){return[e.style,e.weight,l()?e.stretch:"","100px",t].join(" ")}var u=null,a=null,f=null;o.prototype.load=function(e,i){var o=this,a=e||"BESbswy",l=i||3e3,h=(new Date).getTime();return new Promise(function(e,i){null===f&&(f=!!window.FontFace);if(f){var p=new Promise(function(e,t){function n(){(new Date).getTime()-h>=l?t():document.fonts.load(c(o,o.family),a).then(function(t){1<=t.length?e():setTimeout(n,25)},function(){t()})}n()}),d=new Promise(function(e,t){setTimeout(t,l)});Promise.race([d,p]).then(function(){e(o)},function(){i(o)})}else t(function(){function t(){var t;if(t=-1!=m&&-1!=g||-1!=m&&-1!=S||-1!=g&&-1!=S)(t=m!=g&&m!=S&&g!=S)||(null===u&&(t=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),u=!!t&&(536>parseInt(t[1],10)||536===parseInt(t[1],10)&&11>=parseInt(t[2],10))),t=u&&(m==x&&g==x&&S==x||m==T&&g==T&&S==T||m==N&&g==N&&S==N)),t=!t;t&&(null!==C.parentNode&&C.parentNode.removeChild(C),clearTimeout(L),e(o))}function f(){if((new Date).getTime()-h>=l)null!==C.parentNode&&C.parentNode.removeChild(C),i(o);else{var e=document.hidden;if(!0===e||void 0===e)m=p.a.offsetWidth,g=d.a.offsetWidth,S=v.a.offsetWidth,t();L=setTimeout(f,50)}}var p=new n(a),d=new n(a),v=new n(a),m=-1,g=-1,S=-1,x=-1,T=-1,N=-1,C=document.createElement("div"),L=0;C.dir="ltr",r(p,c(o,"sans-serif")),r(d,c(o,"serif")),r(v,c(o,"monospace")),C.appendChild(p.a),C.appendChild(d.a),C.appendChild(v.a),document.body.appendChild(C),x=p.a.offsetWidth,T=d.a.offsetWidth,N=v.a.offsetWidth,f(),s(p,function(e){m=e,t()}),r(p,c(o,'"'+o.family+'",sans-serif')),s(d,function(e){g=e,t()}),r(d,c(o,'"'+o.family+'",serif')),s(v,function(e){S=e,t()}),r(v,c(o,'"'+o.family+'",monospace'))})})},"undefined"!=typeof module?module.exports=o:(window.FontFaceObserver=o,window.FontFaceObserver.prototype.load=o.prototype.load)})();
+
+		var fontA = new FontFaceObserver('Lato');
+		var fontB = new FontFaceObserver('LatoBold');
+		var fontC = new FontFaceObserver('LatoItalic');
+		var fontD = new FontFaceObserver('LatoBoldItalic');
+
+		Promise.all([fontA.load(), fontB.load(), fontC.load(), fontD.load()]).then(function () {
+			document.documentElement.className += " fonts-loaded";
+
+			// Optimization for Repeat Views
+			sessionStorage.foutFontsLoaded = true;
+		});
+	})();
+	</script>
+</head>
+<body>
+	<h1>FOUT with a Class</h1>
+	<p>This is a paragraph. <strong>This is heavier text.</strong> <em>This is emphasized text.</em> <strong><em>This is heavier and emphasized text.</em></p>
+</body>
+</html>