Add font-display + preload demo

zachleat · Mar 28, 2018 · 78ca78e · 78ca78e
1 parent a39f281
commit 78ca78e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,12 @@ As web fonts are a progressive enhancement and with increasing support for the C
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#preload)
 * [Demo](https://www.zachleat.com/web-fonts/demos/preload.html)** _(4 web fonts—1 preloaded)_
 
+### `font-display` and `preload`
+
+* [Code](./font-display-preload.html)
+* _TODO_ Documentation
+* [Demo](https://www.zachleat.com/web-fonts/demos/font-display-preload.html)** _(4 web fonts—1 preloaded)_
+
 ### FOUT with a Class
 
 * [Code](./fout-with-class.html)

diff --git a/font-display-preload.html b/font-display-preload.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>font-display: swap and preload</title>
+	<link rel="preload" href="font-lato/lato-regular-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: swap;
+	}
+	@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: swap;
+	}
+
+	@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: swap;
+	}
+
+	@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: swap;
+	}
+	body {
+		font-family: Lato, sans-serif;
+	}
+	</style>
+</head>
+<body>
+	<h1>font-display: swap and preload</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>