perf: self-host Google Fonts to eliminate render-blocking external request

Download Cormorant Garamond 600 and Manrope (variable, 400-800) woff2
files for latin + latin-ext subsets. Add @font-face declarations to
style.css and remove the Google Fonts <link> and preconnect hints from
base.html.

Eliminates the render-blocking CSS fetch to fonts.googleapis.com that
delayed First Contentful Paint by 100-300ms on typical connections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vinta Chen 2026-03-24 12:32:25 +08:00
parent 440a7c86d4
commit f91c8fa979
No known key found for this signature in database
GPG Key ID: B93DE4F003C33630
6 changed files with 37 additions and 6 deletions

Binary file not shown.

Binary file not shown.

View File

@ -1,3 +1,40 @@
/* latin-ext */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/static/fonts/cormorant-garamond-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/static/fonts/cormorant-garamond-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;

View File

@ -20,12 +20,6 @@
<meta name="twitter:card" content="summary" />
<meta name="theme-color" content="#1c1410" />
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Manrope:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/style.css" />
<script
async