Simplified FOUT strategy (no class)

zachleat · zachleat · commit 1b82fd08e3a9 · 2018-11-28T17:26:04.000-06:00
diff --git a/README.md b/README.md
@@ -33,6 +33,15 @@ As web fonts are a progressive enhancement and with increasing support for the C
 * [Demo](https://www.zachleat.com/web-fonts/demos/fout-with-class.html) _(4 web fonts)_
 * or [using a polyfill](./fout-with-class-polyfill.html)—[Demo](https://www.zachleat.com/web-fonts/demos/fout-with-class-polyfill.html) _(4 web fonts)_
 
+### FOUT
+
+Similar to the above, but without using a class—using only the CSS Font Loading API. This doesn’t require any modification of the CSS, injects the web fonts using JS programmatically. Documented in the [Webfont Handbook from @bramstein](https://abookapart.com/products/webfont-handbook).
+
+* [Code](./fout.html)
+* [Demo](https://www.zachleat.com/web-fonts/demos/fout.html) _(4 web fonts)_
+
+* **TODO** Related: `.style.fontFamily` method (only works well with one family per page), first saw this in a [tweet from @simevidas](https://twitter.com/simevidas/status/829016037366566912)
+
 ### FOFT
 
 * [Code](./foft.html)
@@ -93,9 +102,6 @@ You’ll probably see blog posts on these at some point.
 * [FOUT metric matching with a Variable Font](./variablefont-fout-test.html)
   * Reduction in FOUT reflow (reduce text movement on web font render)
   * Related: [Font style matcher](https://meowni.ca/font-style-matcher/) from @notwaldorf
-* FOUT without a class
-  * `.style.fontFamily` method (only works well with one family per page), first saw this in a [tweet from @simevidas](https://twitter.com/simevidas/status/829016037366566912)
-  * CSS Font Loading API `.add()` method: Doesn’t require any modification of the CSS, injects the web fonts using JS programmatically (the Asynchronous Data URI method below also does this). Documented in the [Webfont Handbook from @bramstein](https://abookapart.com/products/webfont-handbook).
 
 ## Not Recommended but included for Posterity
 
diff --git a/fout.html b/fout.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>FOUT</title>
+	<style>
+	body {
+		font-family: Lato, sans-serif;
+	}
+	
+	</style>
+	<script>
+	(function() {
+		if( "fonts" in document ) {
+			var fontRoman = new FontFace("Lato", "url('font-lato/lato-regular-webfont.woff2') format('woff2'),url('font-lato/lato-regular-webfont.woff') format('woff')");
+			var fontBold = new FontFace("Lato", "url('font-lato/lato-bold-webfont.woff2') format('woff2'),url('font-lato/lato-bold-webfont.woff') format('woff')", {
+				weight: "700"
+			});
+			var fontItalic = new FontFace("Lato", "url('font-lato/lato-italic-webfont.woff2') format('woff2'),url('font-lato/lato-italic-webfont.woff') format('woff')", {
+				style: "italic"
+			});
+			var fontBoldItalic = new FontFace("Lato", "url('font-lato/lato-bolditalic-webfont.woff2') format('woff2'),url('font-lato/lato-bolditalic-webfont.woff') format('woff')", {
+				weight: "700",
+				style: "italic"
+			});
+
+			Promise.all([
+				fontRoman.load(),
+				fontBold.load(),
+				fontItalic.load(),
+				fontBoldItalic.load()
+			]).then(function(loadedFonts) {
+
+				// Render them at the same time
+				loadedFonts.forEach(function(font) {
+					document.fonts.add(font);
+				});
+			});
+		}
+	})();
+	</script>
+</head>
+<body>
+	<h1>FOUT</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></strong></p>
+
+	<hr style="margin-top: 2em">
+	<ul>
+		<li>This demo is a companion to <a href="https://www.zachleat.com/web/comprehensive-webfonts/">A Comprehensive Guide to Font Loading Strategies</a></li>
+		<li>See all demos on <a href="https://github.com/zachleat/web-font-loading-recipes">GitHub <code>zachleat/web-font-loading-recipes</code></a></li>
+	</ul>
+</body>
+</html>
