Adds asynchronous css approach

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

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -122,12 +122,17 @@ You’ll probably see blog posts on these at some point.
 
 ### Failed Experiments
 
+* Asynchronous CSS
+  * This is a common thing people try. Heck, this is what I used to do on [nebraskajs.com](https://nebraskajs.com). Read more at [Lazy Loading Web Fonts is Probably Not What You Want](https://www.zachleat.com/web/lazy-loading-webfonts/)
+  * **Failed**: lazy loading the CSS only delays the start of the FOIT. Does nothing to prevent it.
+  * [Code](./asynchronous-css.html)
+  * [Demo](https://www.zachleat.com/web-fonts/demos/asynchronous-css.html) _(4 web fonts)_
 * `@supports` and `font-display`
-  * [Code](failed-supports.html)
   * Reasons for trying:
     * might be nice to only use web fonts if you can FOUT with `font-display`
     * might be nice to have FOUT with a class if `font-display` not supported (and work well without JS dependencies)
   * **Failed**: `@supports` doesn’t work with font-face descriptors.
+  * [Code](failed-supports.html)
   * [Demo](https://www.zachleat.com/web-fonts/demos/failed-supports.html)
 
 ---

diff --git a/asynchronous-css.css b/asynchronous-css.css
@@ -0,0 +1,26 @@
+@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;
+}
diff --git a/asynchronous-css.html b/asynchronous-css.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Asynchronous CSS only</title>
+	<!--
+		this method is not supported in Android <= 4.3.
+		Use filamentgroup/loadcss for broader browser compatibility
+	-->
+	<link rel="stylesheet" href="asynchronous-css.css" media="none" onload="this.media='all'">
+	<style>
+	body {
+		font-family: Lato, sans-serif;
+	}
+	</style>
+</head>
+<body>
+	<h1>Asynchronous CSS only</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>