Cascade FallsISSUE #28 of 33

@font-face · loading custom fonts

StylaVSThe Specificity Sphinx

Styla says@font-face loads a custom font file so you’re not limited to system fonts.

@font-face declares a font by name and points at a file (woff2 preferred for size). Then use that name in font-family. Self-hosting or a service both work. Keep weights minimal — every file is bytes the user downloads before text settles.

Power-ups you unlock

@font-face maps a name to a font file
woff2 is the smallest, best-supported format
Use the declared name in font-family
Limit weights/styles to cut load time

The Specificity Sphinx attacks — common mistakes

Loading many weights you never use
No fallback while the font downloads
Wrong path/format → font silently fails

Boss battleDeclare an @font-face (or link a web font) and apply it to headings with a system fallback.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>/* @font-face{font-family:'Brand';src:url('brand.woff2') format('woff2')} */ h1{font-family:'Brand',Georgia,serif;color:#b388ff}</style></head><body style="background:#06040d"><h1>custom (or fallback) font</h1></body></html>

▶ Open the interactive comic issue

‹ Fonts · Family · Size · Weight · Style Font-Display · Swap · Fallback · Optional ›