[Good First Issue]: perf(frontend): add font preload to eliminate render-blocking font fetch on LCP #112
Description
🆕 Newcomer Friendly
This is a Good First Issue — a focused performance improvement to the <head> of docs/index.html.
What you will do
- ✅ Add a
<link rel="preload">tag for the Inter woff2 font above the Google Fonts stylesheet link - ✅ Confirm the existing Google Fonts URL retains
&display=swap - ✅ Submit a pull request
Important
- Basic HTML knowledge is sufficient
- Comment
/assignto claim this issue - Read CONTRIBUTING.md before opening a PR
Note
⏱️ Typical time to complete: 20–45 minutes
🧩 Difficulty: Single tag addition in HTML <head>
🎓 Best for: First-time contributors interested in web performance
🏁 When this issue is complete, you will have:
- ✅ A merged PR in a real open-source project
- ✅ Your name in the Contributors Hall of Fame
👾 Task Description
At lines 17–21 of docs/index.html, Inter and Outfit fonts are loaded via Google Fonts. Although the URL includes &display=swap, there is no <link rel="preload"> for the primary Inter font — meaning browsers fetch it at default priority, which delays LCP (Largest Contentful Paint) on slow connections.
Add this line ABOVE the existing Google Fonts <link> tag (docs/index.html line 17):
<link rel="preload" as="font" type="font/woff2" crossorigin
href="https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2">Also verify the existing <link> for Google Fonts retains &display=swap (it currently does — just confirm).
File to edit: docs/index.html, lines 17–21
✅ Acceptance Criteria
- A
<link rel="preload">for the Inter woff2 file is placed before the Google Fonts stylesheet<link> - The Google Fonts URL retains
&display=swap - No other HTML or CSS is changed
- Page loads correctly in both dark and light themes
- Existing tests still pass (
make test) - PR linked with
Fixes #<number> - PR title:
perf(frontend): add font preload to eliminate render-blocking font fetch