CSS Custom Fonts — Code Challenge
Put understand locally hosted web fonts into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- A local @font-face rule connects a family name to a real font file, usually WOFF2. Font-display controls the loading strategy; this example falls back because no custom font asset is included.
- A decorative effect should leave the content understandable when the effect is unavailable. Provide a readable background and normal document flow first.
- Inspect clipping, stacking, and contrast when adding layers; appearance changes do not always change the layout box.
Your task
Use the HTML below to explore this rule: A local @font-face rule connects a family name to a real font file, usually WOFF2. Font-display controls the loading strategy; this example falls back because no custom font asset is included. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
.card { font-family: "Workshop Sans", system-ui, sans-serif; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.card { font-family: "Workshop Sans", system-ui, sans-serif; }
A local @font-face rule connects a family name to a real font file, usually WOFF2. Font-display controls the loading strategy; this example falls back because no custom font asset is included.