Styla saysFonts are set with font-family, font-size, font-weight, and font-style.
font-family takes a prioritized list ending in a generic fallback (sans-serif). font-size uses px or, better, rem for accessibility. font-weight ranges 100-900 (400 normal, 700 bold). The font shorthand packs them together. Always provide fallbacks.
Power-ups you unlock
font-family: list ending in a generic fallback
font-size in rem scales with user settings
font-weight 100-900 (400 normal, 700 bold)
font shorthand combines them
The Specificity Sphinx attacks — common mistakes
No generic fallback at the end of font-family
Sizing everything in px (ignores user zoom)
Requesting a weight the font does not ship (faux bold)
Boss battleSet a font stack with a fallback, size body in rem, and make headings 700 weight.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>body{font-family:"Segoe UI",system-ui,sans-serif;font-size:1rem;color:#e6e0ff}h1{font-weight:700;color:#b388ff}</style></head><body style="background:#06040d;padding:20px"><h1>bold heading</h1><p>body text in rem.</p></body></html>