# zachleat/web-font-loading-recipes

A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/

Repository: https://github.com/zachleat/web-font-loading-recipes
Canonical: https://ross.abutalabs.com/products/web-font-loading-recipes
Homepage: https://www.zachleat.com/web/recipes/
Language: HTML
License: MIT
License Family: permissive
Topics: web-fonts, font, demo, font-face
Last push: 2022-01-26T12:52:04+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 3242, "days_push": 1680, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1062, forks 38 (observed 2026-08-28T04:03:26.155799+00:00)

## What it is
A collection of HTML demos demonstrating different web font loading strategies, companion to Zach Leatherman's Comprehensive Guide to Font Loading Strategies. It covers recommended methods like font-display: swap and preload, plus experimental and deprecated approaches.

## Use cases
- learn how to load web fonts without layout shift
- compare font-display swap vs preload strategies
- avoid flash of invisible text when loading custom fonts
- find code examples for the CSS Font Loading API
- understand FOUT vs FOIT font loading behavior
- pick a web font loading strategy for my website

## When to choose
- you are deciding how to load web fonts on a site and want working demo code
- you want to learn the tradeoffs between font loading strategies including anti-patterns
- you need polyfilled vs native CSS Font Loading API examples for broader browser support

## When to avoid
- you need a production font loading library rather than educational demos
- you need actively updated examples for the latest browser features
- you are not working with web fonts or frontend performance

## Facets
- artifact type: learning-resource
- maturity: maintenance
- function: developer-tools, documentation
- domain: web-development, frontend, web-design, tutorials
- platform: browser
- tags: web-fonts, font-loading, font-display, fout, css-font-loading-api, preload, demos, performance, web-server

## Member repositories
- zachleat/web-font-loading-recipes (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:03:26.155799+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:56:47.693493+00:00, confidence not recorded.
  - readme: https://github.com/zachleat/web-font-loading-recipes (fetched 2026-08-28T04:03:26.155799+00:00, sha e453d70eb36e)
  - homepage: https://www.zachleat.com/web/recipes/ (fetched 2026-08-29T12:58:27.866215+00:00, sha 37cd5110d08a)
  - site_page: https://www.zachleat.com/about (fetched 2026-08-29T12:58:27.869583+00:00, sha 0970046c2042)
- Data as of 2026-08-30T08:39:29.467469+00:00.