Adds font-display: optional strategies

zachleat · Apr 20, 2018 · e74cdfb · e74cdfb
1 parent ba745ae
commit e74cdfb
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Demos are hosted at https://www.zachleat.com/web-fonts/demos/
 
 As web fonts are a progressive enhancement and with increasing support for the CSS Font Loading API, we can look forward to a time in which we won’t need to inline a polyfill into the header (for even faster font loading). The simplified CSS Font Loading API recipes are the defaults, but polyfilled versions are included for broader browser support—notably only the polyfilled versions will show web fonts in Internet Explorer and Edge web browsers (which do not have support for the CSS Font Loading API).
 
-### `font-display`
+### `font-display: swap`
 
 * [Code](./font-display.html)
 * [Read more](https://www.zachleat.com/web/comprehensive-webfonts/#font-display)
@@ -99,6 +99,10 @@ You’ll probably see blog posts on these at some point.
 
 ## Not Recommended but included for Posterity
 
+* `font-display: optional`
+  * A little harsh to put this in the Not Recommended section but I like my web fonts on an empty-cache visit 😎
+  * [Code](./font-display-optional.html)
+  * [Demo](https://www.zachleat.com/web-fonts/demos/font-display-optional.html)** _(4 web fonts)_
 * System fonts
   * [Code](./dont.html)
   * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#abstain)
@@ -126,6 +130,10 @@ You’ll probably see blog posts on these at some point.
   * [Read more](https://www.zachleat.com/web/comprehensive-webfonts/#async-data-uri)
   * [Demo](https://www.zachleat.com/web-fonts/demos/async-data-uri.html) _(4 web fonts)_
 * ⚠️ Anything that injects a new `<style>` with `@font-face` blocks inside. Really bad repaint cost—seriously, don’t do this.
+* `preload` with `font-display: optional`
+  * [Code](./font-display-optional-preload.html)
+  * [Read more: `preload` with `font-display: optional` is an Anti-pattern](https://www.zachleat.com/web/preload-font-display-optional/)
+  * [Demo](https://www.zachleat.com/web-fonts/demos/font-display-optional-preload.html)** _(4 web fonts)_
 
 ### Failed Experiments
 

diff --git a/font-display-optional-preload.html b/font-display-optional-preload.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>preload and font-display: optional</title>
+	<link rel="preload" href="font-lato/lato-regular-webfont.woff2" as="font" type="font/woff2" crossorigin>
+	<link rel="preload" href="font-lato/lato-bold-webfont.woff2" as="font" type="font/woff2" crossorigin>
+	<link rel="preload" href="font-lato/lato-italic-webfont.woff2" as="font" type="font/woff2" crossorigin>
+	<link rel="preload" href="font-lato/lato-bolditalic-webfont.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-display: optional;
+	}
+	@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-display: optional;
+	}
+
+	@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-display: optional;
+	}
+
+	@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;
+		font-display: optional;
+	}
+	body {
+		font-family: Lato, sans-serif;
+	}
+	</style>
+</head>
+<body>
+	<h1>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/font-display-optional.html b/font-display-optional.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>font-display: optional</title>
+	<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-display: optional;
+	}
+	@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-display: optional;
+	}
+
+	@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-display: optional;
+	}
+
+	@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;
+		font-display: optional;
+	}
+	body {
+		font-family: Lato, sans-serif;
+	}
+	</style>
+</head>
+<body>
+	<h1>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>