Links to code, subheadings for recipes

zachleat · Mar 27, 2018 · a39f281 · a39f281
1 parent cfdd969
commit a39f281
Showing 1 changed file with 32 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -8,52 +8,61 @@ 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.html)
+### `font-display`
 
+* [Code](./font-display.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#font-display)
 * [Demo](https://www.zachleat.com/web-fonts/demos/font-display.html)** _(4 web fonts)_
 
-### [`preload`](./preload.html)
+### `preload`
 
+* [Code](./preload.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#preload)
 * [Demo](https://www.zachleat.com/web-fonts/demos/preload.html)** _(4 web fonts—1 preloaded)_
 
-### [FOUT with a Class](./fout-with-class.html)
+### FOUT with a Class
 
+* [Code](./fout-with-class.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#fout-class)
 * [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)_
 
-### [FOFT](./foft.html)
+### FOFT
 
+* [Code](./foft.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#foft)
 * [Demo](https://www.zachleat.com/web-fonts/demos/foft.html) _(5 web fonts, two are the same—but only loaded once)_
 * or [using a polyfill](./foft-polyfill.html)—[Demo](https://www.zachleat.com/web-fonts/demos/foft-polyfill.html) _(4 web fonts)_
 
-### [FOFT using only `font-display`](./font-display-mix.html)
+### FOFT using only `font-display`
 
+* [Code](./font-display-mix.html)
 * [Demo](https://www.zachleat.com/web-fonts/demos/font-display-mix.html) _(4 web fonts—1 `swap` / 3 `optional`)_
 
-### [Critical FOFT](./critical-foft.html)
+### Critical FOFT
 
+* [Code](./critical-foft.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft)
 * [Demo](https://www.zachleat.com/web-fonts/demos/critical-foft.html) _(5 web fonts—1 subset)_
 * or [using a polyfill](./critical-foft-polyfill.html)—[Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-polyfill.html) _(5 web fonts—1 subset)_
 
-### [Critical FOFT with Data URI](critical-foft-data-uri.html)
+### Critical FOFT with Data URI
 
+* [Code](critical-foft-data-uri.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-data-uri)
 * [Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-data-uri.html) _(5 web fonts—1 subset inline Data URI)_
 * or [using a polyfill](./critical-foft-data-uri-polyfill.html)—[Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-data-uri-polyfill.html) _(5 web fonts—1 subset inline Data URI)_
 
-### [Critical FOFT with `preload`](./critical-foft-preload.html)
+### Critical FOFT with `preload`
 
+* [Code](./critical-foft-preload.html)
 * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload)
 * [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 Compromise”: Critical FOFT with `preload`, with a polyfill fallback emulating `font-display: optional`](./critical-foft-preload-fallback-optional.html)
+### “The Compromise”: Critical FOFT with `preload`, with a polyfill fallback emulating `font-display: optional`
 
+* [Code](./critical-foft-preload-fallback-optional.html)
 * _TODO_ Documentation
   * Builds on the eBay method described in the experiments below.
 * [Demo](https://www.zachleat.com/web-fonts/demos/critical-foft-preload-fallback-optional.html) _(5 web fonts—1 subset)_ (polyfill is lazy loaded when CSS Font Loading API is not supported)
@@ -77,31 +86,38 @@ You’ll probably see blog posts on these at some point.
 
 ## Not Recommended but included for Posterity
 
-* [System fonts](./dont.html)
+* System fonts
+  * [Code](./dont.html)
   * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#abstain)
   * [Demo](https://www.zachleat.com/web-fonts/demos/dont.html) _(0 web fonts)_
-* [Unceremonious Web Fonts](./unceremonious-font-face.html)
+* Unceremonious Web Fonts
+  * [Code](./unceremonious-font-face.html)
   * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#font-face)
   * [Demo](https://www.zachleat.com/web-fonts/demos/unceremonious-font-face.html)** _(4 web fonts)_
-* [Unceremonious Faux Web Fonts](./unceremonious-faux-font-face.html)
+* Unceremonious Faux Web Fonts
+  * [Code](./unceremonious-faux-font-face.html)
   * [Demo](https://www.zachleat.com/web-fonts/demos/unceremonious-faux-font-face.html)** _(1 web font)_: Bold and italic variants are rendered using [font-synthesis](https://www.zachleat.com/web/webfont-glossary/#font-synthesis)
-* [Unceremonious Web Fonts, WOFF2 Only (Cutting the Mustard)](./unceremonious-font-face-woff2-only.html)
+* Unceremonious Web Fonts, WOFF2 Only (Cutting the Mustard)
+  * [Code](./unceremonious-font-face-woff2-only.html)
   * Old browsers [used to render FOIT without a timeout](https://www.zachleat.com/web/fout-foit-history/), which in practice made web fonts a single point of failure. Using WOFF2 only cuts the mustard to modern browsers that have a three second FOIT timeout for web fonts. Three seconds is still way too long for me to implement this in production, but it’s worth noting.
   * [Demo](https://www.zachleat.com/web-fonts/demos/unceremonious-font-face-woff2-only.html)** _(4 web fonts)_
 
 ### Deprecated Methods
 
-* [Inline Data URI](./inline-data-uri.html)
+* Inline Data URI
+  * [Code](./inline-data-uri.html)
   * [Documentation](https://www.zachleat.com/web/comprehensive-webfonts/#inline-data-uri)
   * [Demo](https://www.zachleat.com/web-fonts/demos/inline-data-uri.html) _(4 web fonts)_
-* [Asynchronous Data URI](./async-data-uri.html)
+* Asynchronous Data URI
+  * [Code](./async-data-uri.html)
   * [Documentation](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.
 
 ### Failed Experiments
 
-* [`@supports` and `font-display`](failed-supports.html)
+* `@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)