"WeightDemo" is built via @font-face src: local() from whichever real installed faces this machine provides (Roboto's six weights on the docs build machine, Segoe UI's five on Windows). Requested weights with no exact face are matched to the nearest real one per the §5.2 search order.
font-weight: 100 — The quick brown fox jumps over the lazy dog
font-weight: 200 — The quick brown fox jumps over the lazy dog
font-weight: 300 — The quick brown fox jumps over the lazy dog
font-weight: 400 — The quick brown fox jumps over the lazy dog
font-weight: 500 — The quick brown fox jumps over the lazy dog
font-weight: 600 — The quick brown fox jumps over the lazy dog
font-weight: 700 — The quick brown fox jumps over the lazy dog
font-weight: 800 — The quick brown fox jumps over the lazy dog
font-weight: 900 — The quick brown fox jumps over the lazy dog
"SynthDemo" is registered via @font-face from a single Regular-only face - bold/italic requests have no real matching face to use, so the renderer synthesizes them (fill+stroke render mode for bold, glyph shear for italic).
Regular (the one real registered face)
Bold (synthesized: fill+stroke)
Italic (synthesized: fixed default shear)
Bold Italic (both synthesized)
oblique <angle>Each line requests a different explicit oblique angle against the same Regular-only face - the synthesized shear follows the declared angle exactly, not a fixed default.
oblique 0deg
oblique 8deg
oblique 14deg
oblique 20deg
oblique 30deg
"StretchDemo" registers two real, differently-shaped faces under one family via two @font-face rules with declared font-stretch descriptors - selecting condensed picks the genuinely narrower face (Roboto Condensed on the docs build machine, Arial Narrow on Windows), not just a coincidentally-matching one.
font-stretch: normal
font-stretch: condensed
Each generic family resolves to a real installed font: via fontconfig on the docs build machine, via the Chromium-matched platform table elsewhere.
serif: The quick brown fox jumps over the lazy dog
sans-serif: The quick brown fox jumps over the lazy dog
monospace: The quick brown fox jumps over the lazy dog
cursive: The quick brown fox jumps over the lazy dog
fantasy: The quick brown fox jumps over the lazy dog
system-ui: The quick brown fox jumps over the lazy dog