Adds the eBay Method.

zachleat · Apr 8, 2018 · 3dfa424 · 3dfa424
1 parent 113e8ac
commit 3dfa424
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,13 @@ As web fonts are a progressive enhancement and with increasing support for the C
 * [Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-preload.html) _(5 web fonts—1 subset)_
 * or [using a polyfill](./critical-foft-preload-polyfill.html)—[Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-preload-polyfill.html) _(5 web fonts—1 subset)_
 
+### The eBay Method
+
+* Emulate `font-display: optional` with JavaScript.
+* Notable that it lazy loads the font loading polyfill only if CSS Font Loading API is not supported
+* Read more at [eBay’s Font Loading Strategy](http://www.ebaytechblog.com/2017/09/21/ebays-font-loading-strategy/).
+* [Demo](https://www.zachleat.com/web-fonts/demos/ebay-method.html) _(4 web fonts)_ (polyfill is lazy loaded when CSS Font Loading API is not supported)
+
 ### “The Compromise”: Critical FOFT with `preload`, with a polyfill fallback emulating `font-display: optional`
 
 * [Code](./critical-foft-preload-fallback-optional.html)
@@ -84,8 +91,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
-* Emulate `font-display: optional` with JS (the [eBay method](http://www.ebaytechblog.com/2017/09/21/ebays-font-loading-strategy/))
-  * Notable in that it lazy loads the font loading polyfill only if the CSS Font Loading API is not supported
 * 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).

diff --git a/critical-foft-preload-fallback-optional.html b/critical-foft-preload-fallback-optional.html
@@ -78,6 +78,13 @@
 			script.src = "critical-foft-preload-fallback-optional.js";
 			script.async = true;
 			ref.parentNode.insertBefore( script, ref );
+
+			/*
+			 * technically you could trigger the web font load here too and race it with
+			 * the polyfill load, this means creating an element with text content that
+			 * uses the font and attaching it to the document
+			 * <div style="font-family: Lato; font-weight: 400; font-style: italic">A</div>
+			 */
 		}
 	})();
 	</script>

diff --git a/critical-foft-preload-fallback-optional.js b/critical-foft-preload-fallback-optional.js
diff --git a/ebay-method.html b/ebay-method.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>The eBay Method: Emulating font-display: optional with JavaScript</title>
+	<link rel="preload" href="font-lato/lato-zachleat-optimized.woff2" as="font" type="font/woff2" crossorigin>
+	<style>
+	@font-face {
+		font-family: Lato;
+		src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
+				 url('font-lato/lato-regular-webfont.woff') format('woff');
+	}
+	@font-face {
+		font-family: Lato;
+		src: url('font-lato/lato-bold-webfont.woff2') format('woff2'),
+				 url('font-lato/lato-bold-webfont.woff') format('woff');
+		font-weight: 700;
+	}
+	@font-face {
+		font-family: Lato;
+		src: url('font-lato/lato-italic-webfont.woff2') format('woff2'),
+				 url('font-lato/lato-italic-webfont.woff') format('woff');
+		font-style: italic;
+	}
+	@font-face {
+		font-family: Lato;
+		src: url('font-lato/lato-bolditalic-webfont.woff2') format('woff2'),
+				 url('font-lato/lato-bolditalic-webfont.woff') format('woff');
+		font-weight: 700;
+		font-style: italic;
+	}
+
+	body {
+		font-family: sans-serif;
+	}
+	.fonts-loaded body {
+		font-family: Lato;
+	}
+	</style>
+	<script>
+	(function() {
+		"use strict";
+
+		// Optimization for Repeat Views
+		if( localStorage.fontsLoadedEbayMethod ) {
+			document.documentElement.className += " fonts-loaded";
+			return;
+		} else if( "fonts" in document ) {
+			document.fonts.load("1em LatoSubset").then(function () {
+				Promise.all([
+					document.fonts.load("400 1em Lato"),
+					document.fonts.load("700 1em Lato"),
+					document.fonts.load("italic 1em Lato"),
+					document.fonts.load("italic 700 1em Lato")
+				]).then(function () {
+					// One difference here from the other demos is that it uses localStorage instead of sessionStorage
+					localStorage.fontsLoadedEbayMethod = true;
+				});
+			});
+		} else {
+			// use fallback
+			var ref = document.getElementsByTagName( "script" )[ 0 ];
+			var script = document.createElement( "script" );
+			script.src = "ebay-method.js";
+			script.async = true;
+			ref.parentNode.insertBefore( script, ref );
+
+			/*
+			 * technically you could trigger the web font load here too and race it with
+			 * the polyfill load, this means creating an element with text content that
+			 * uses the font and attaching it to the document
+			 * <div style="font-family: Lato; font-weight: 400; font-style: italic">A</div>
+			 */
+		}
+	})();
+	</script>
+</head>
+<body>
+	<h1>“The Compromise”: Critical FOFT with preload, with a polyfill fallback emulating font-display: optional</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>
diff --git a/ebay-method.js b/ebay-method.js