refactor(web): self-host fonts via next/font/google

Replace external <link> to fonts.googleapis.com with next/font/google for Cormorant Garamond and Inter. Fonts are now built-time downloaded and served from /_next/static/media, exposed via --font-serif and --font-sans CSS variables that Tailwind's fontFamily reads. Eliminates runtime dependency on Google Fonts CDN (helpful for offline or region-restricted deploys), avoids FOUT through next/font's size-adjusted fallback, and removes two render-blocking external stylesheet requests on first load. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 15:20:15 +08:00
parent 2793c06278
commit d81f4ab2f1
2 changed files with 23 additions and 13 deletions
@@ -1,6 +1,22 @@
 import type { Metadata } from "next";
+import { Cormorant_Garamond, Inter } from "next/font/google";
 import "./globals.css";

+const cormorant = Cormorant_Garamond({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600"],
+  style: ["normal", "italic"],
+  variable: "--font-serif",
+  display: "swap",
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["300", "400", "500"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
  title: "云梦 — AI 视觉小说",
  description: "一部由 AI 实时绘制每一帧的开源视觉小说。",
@@ -12,18 +28,12 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="zh-CN" suppressHydrationWarning>
+    <html
+      lang="zh-CN"
+      className={`${cormorant.variable} ${inter.variable}`}
+      suppressHydrationWarning
+    >
      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin=""
-        />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap"
-        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -24,8 +24,8 @@ const config: Config = {
        },
      },
      fontFamily: {
-        serif: ['"Cormorant Garamond"', '"Source Han Serif SC"', "ui-serif", "Georgia", "serif"],
-        sans: ['"Inter"', '"PingFang SC"', "ui-sans-serif", "system-ui", "sans-serif"],
+        serif: ['var(--font-serif)', '"Source Han Serif SC"', "ui-serif", "Georgia", "serif"],
+        sans: ['var(--font-sans)', '"PingFang SC"', "ui-sans-serif", "system-ui", "sans-serif"],
      },
      letterSpacing: {
        widest: "0.32em",