mike/shopwisdom-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perf: self-host fonts (drop render-blocking Google Fonts) + defer Cal + viewport-aware lighter mobile hero

Browse Source 
Self-hosted woff2 (8 latin faces, subset, font-display swap), preload H1/body; removed Google Fonts link. Cal embed loads on first interaction. New 0.31MB mobile hero served at <=760px (was one 0.8MB file to all viewports). A11y: eyebrow up to 0.72rem.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-25 19:18:37 -07:00
parent 27d4abf061
commit 5872f22470
11 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+10 -1
View File
@@ -1,3 +1,12 @@
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dmsans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dmsans-500.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/lora-400.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/lora-500.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/lora-400i.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-400.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/playfair-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-400i.woff2') format('woff2')}
:root {
--paper: #f7f4ef;
--paper-2: #efebe3;
@@ -49,7 +58,7 @@ strong { font-weight: 500; color: var(--ink); }
/* Eyebrow with steel dash */
.eyebrow {
font-family: 'DM Sans', sans-serif; font-size: 0.66rem; font-weight: 400;
font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400;
text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent);
margin: 0 0 24px; display: flex; align-items: center;
}