From a275601ddc48851207a837409d86bf7f9edbff7b Mon Sep 17 00:00:00 2001
From: James <james@eli.cx>
Date: Thu, 11 Jun 2026 01:00:36 +0100
Subject: [PATCH] fix(fonts): filter preloads by subsets and externalize
 @font-face CSS (#1897)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

next/font/google ignored the `subsets` option: every unicode subset's
.woff2 was preloaded (13 extra preloads for two fonts in the report),
and the full @font-face CSS was inlined into every HTML response as a
<style data-vinext-fonts> block (~12.7 KB uncompressed).

Match Next.js behavior:

- Port findFontFilesInCss from Next.js: parse the `/* subset */`
  comments in the Google Fonts css2 response and only emit
  <link rel="preload"> (and Link header entries) for files in the
  requested `subsets`; emit none for `preload: false`. All @font-face
  rules stay in the CSS — each carries a unicode-range, so the browser
  only downloads files matching page content.
- Write the served @font-face CSS as an external font.<contenthash>.css
  next to the cached font files and reference it via
  <link rel="stylesheet"> instead of inlining it. The build plugin now
  injects `_vinext.font.selfHostedCSSUrl` + `preloadFontFiles` instead
  of embedding the CSS string in the bundle; writeBundle copies the
  stylesheet into the client output (served immutable) and the dev
  middleware serves it from the cache dir. The tiny class/variable/
  fallback-metric rules stay inline.
---
 .../google-fonts/find-font-files-in-css.ts    |  49 ++++
 packages/vinext/src/plugins/fonts.ts          | 148 ++++++++----
 packages/vinext/src/shims/font-google-base.ts |  90 ++++++--
 tests/app-router-font-google-prod.test.ts     |  35 ++-
 ...pp-router-font-google-subsets-prod.test.ts | 211 ++++++++++++++++++
 tests/e2e/app-router/font-google.spec.ts      |  11 +
 .../font-google-subsets/app/layout.tsx        |  33 +++
 .../fixtures/font-google-subsets/app/page.tsx |   8 +
 .../fixtures/font-google-subsets/package.json |  16 ++
 tests/font-google-build.test.ts               |   2 +-
 tests/font-google.test.ts                     |  38 +++-
 .../find-font-files-in-css.test.ts            |  91 ++++++++
 12 files changed, 659 insertions(+), 73 deletions(-)
 create mode 100644 packages/vinext/src/build/google-fonts/find-font-files-in-css.ts
 create mode 100644 tests/app-router-font-google-subsets-prod.test.ts
 create mode 100644 tests/fixtures/font-google-subsets/app/layout.tsx
 create mode 100644 tests/fixtures/font-google-subsets/app/page.tsx
 create mode 100644 tests/fixtures/font-google-subsets/package.json
 create mode 100644 tests/google-fonts/find-font-files-in-css.test.ts

diff --git a/packages/vinext/src/build/google-fonts/find-font-files-in-css.ts b/packages/vinext/src/build/google-fonts/find-font-files-in-css.ts
new file mode 100644
index 000000000..c0c84016f
--- /dev/null
+++ b/packages/vinext/src/build/google-fonts/find-font-files-in-css.ts
@@ -0,0 +1,49 @@
+// Ported from Next.js: packages/font/src/google/find-font-files-in-css.ts
+// https://github.com/vercel/next.js/blob/canary/packages/font/src/google/find-font-files-in-css.ts
+//
+// Google Fonts css2 responses contain one @font-face block per available
+// unicode subset, each preceded by a `/* <subset> */` comment and carrying
+// its own `unicode-range`. Next.js keeps every block in the emitted CSS —
+// the browser only downloads files whose unicode-range matches the page's
+// content — but emits `<link rel="preload">` only for files whose subset
+// the caller listed in `subsets`. This helper walks the CSS line by line,
+// tracking the current subset comment, and flags which font files should
+// be preloaded.
+//
+// vinext runs this against the *served* CSS (after gstatic URLs have been
+// rewritten to `/<assetsDir>/_vinext_fonts/...`), so the returned URLs are
+// directly usable in preload tags. The subset comments survive the URL
+// rewrites because only `url(...)` contents are replaced.
+
+export type FontFileInCss = {
+  /** The file URL exactly as it appears in the CSS `src: url(...)`. */
+  fontFileUrl: string;
+  /** True when this file's subset is listed in `subsetsToPreload`. */
+  preloadFontFile: boolean;
+};
+
+export function findFontFilesInCss(css: string, subsetsToPreload?: string[]): FontFileInCss[] {
+  const fontFiles: FontFileInCss[] = [];
+  const seen = new Set<string>();
+
+  // Current subset — set by the `/* <subset> */` comment Google emits
+  // immediately before each @font-face block.
+  let currentSubset = "";
+  for (const line of css.split("\n")) {
+    const newSubset = /\/\* (.+?) \*\//.exec(line)?.[1];
+    if (newSubset) {
+      currentSubset = newSubset;
+    } else {
+      const fontFileUrl = /src: url\((.+?)\)/.exec(line)?.[1];
+      if (fontFileUrl && !seen.has(fontFileUrl)) {
+        seen.add(fontFileUrl);
+        fontFiles.push({
+          fontFileUrl,
+          preloadFontFile: !!subsetsToPreload?.includes(currentSubset),
+        });
+      }
+    }
+  }
+
+  return fontFiles;
+}
diff --git a/packages/vinext/src/plugins/fonts.ts b/packages/vinext/src/plugins/fonts.ts
index 9ecd86992..bf7d611e6 100644
--- a/packages/vinext/src/plugins/fonts.ts
+++ b/packages/vinext/src/plugins/fonts.ts
@@ -9,11 +9,13 @@
  *      delete the generated ~1,900-line runtime catalog while keeping ESM import
  *      semantics intact.
  *   2. During production builds, fetches Google Fonts CSS + font files, caches
- *      them locally under `.vinext/fonts/`, and injects `_vinext.font` into
- *      statically analyzable font loader calls so fonts are served from the
- *      deployed origin rather than fonts.googleapis.com. Static calls also
- *      receive adjusted fallback CSS when Next.js-compatible fallback metrics
- *      exist for the selected Google Font.
+ *      them locally under `.vinext/fonts/`, writes the @font-face CSS as an
+ *      external `font.<hash>.css` stylesheet, and injects `_vinext.font`
+ *      (stylesheet URL + subset-filtered preload list) into statically
+ *      analyzable font loader calls so fonts are served from the deployed
+ *      origin rather than fonts.googleapis.com. Static calls also receive
+ *      adjusted fallback CSS when Next.js-compatible fallback metrics exist
+ *      for the selected Google Font.
  *
  * `createLocalFontsPlugin` — vinext:local-fonts
  *   When a source file calls localFont({ src: "./font.woff2" }) or
@@ -28,6 +30,7 @@ import type { Plugin } from "vite";
 import { parseAst } from "vite";
 import path from "node:path";
 import fs from "node:fs";
+import { createHash } from "node:crypto";
 import { escapeRegExp } from "../utils/regex.js";
 import MagicString from "magic-string";
 import {
@@ -37,6 +40,7 @@ import {
 import { validateGoogleFontOptions } from "../build/google-fonts/validate.js";
 import { getFontAxes } from "../build/google-fonts/get-axes.js";
 import { buildGoogleFontsUrl } from "../build/google-fonts/build-url.js";
+import { findFontFilesInCss } from "../build/google-fonts/find-font-files-in-css.js";
 import { CONTENT_TYPES } from "../server/static-file-cache.js";
 import { ASSET_PREFIX_URL_DIR } from "../utils/asset-prefix.js";
 
@@ -81,17 +85,29 @@ const GOOGLE_FONT_UTILITY_EXPORTS = new Set([
  * and writes an `@font-face` CSS snippet whose `src: url(...)` references
  * the files by absolute filesystem path — convenient for disk, unusable at
  * runtime because browsers resolve relative to the origin. Before the CSS
- * is embedded in the bundle as `_vinext.font.selfHostedCSS`, the filesystem
+ * is written out as the served `font.<hash>.css` stylesheet, the filesystem
  * prefix is rewritten to this URL prefix by `_rewriteCachedFontCssToServedUrls()`,
  * and the matching `writeBundle` hook in `createGoogleFontsPlugin` copies
- * the font files into `<clientOutDir>/<assetsDir>/_vinext_fonts/` so the
- * rewritten URL actually resolves against the origin at request time.
+ * the font files and stylesheet into
+ * `<clientOutDir>/<assetsDir>/_vinext_fonts/` so the rewritten URL actually
+ * resolves against the origin at request time.
  *
  * The leading `_` keeps the namespace distinct from Vite's content-hashed
  * asset names (which are emitted flat into `<assetsDir>/`) and from any
  * user-provided public files.
  */
 const VINEXT_FONT_URL_NAMESPACE = "_vinext_fonts";
+
+/**
+ * Filename pattern for the served @font-face stylesheet written next to the
+ * cached font files (`font.<contenthash>.css`). The content hash keeps the
+ * URL stable for CDN caching while still busting when the CSS changes (e.g.
+ * Google revs a font file URL after a cache refetch). Distinct from the
+ * `style.css` intermediate, which contains absolute filesystem paths and
+ * must never be served.
+ */
+const SERVED_FONT_CSS_RE = /^font\.[0-9a-f]{8}\.css$/;
+
 const MAX_GOOGLE_FONTS_ERROR_BODY_LENGTH = 500;
 
 function formatGoogleFontsErrorBody(body: string): string {
@@ -107,12 +123,13 @@ function formatGoogleFontsErrorBody(body: string): string {
  * `@font-face { src: url(...) }` references point at the served URL the
  * plugin's `writeBundle` hook copies the font files to.
  *
- * This is called once per transform, before the CSS string is embedded in
- * the bundle as `_vinext.font.selfHostedCSS`. Every downstream consumer reads
- * from the same rewritten CSS: the injected `<style data-vinext-fonts>` block, the
- * HTML body's `<link rel="preload">` tags (via `collectFontPreloadsFromCSS`
- * in `shims/font-google-base.ts`), and the HTTP `Link:` response header
- * (via `buildAppPageFontLinkHeader` in `server/app-page-execution.ts`).
+ * This is called once per transform, before the CSS string is written out
+ * as the served `font.<hash>.css` stylesheet. Every downstream consumer
+ * reads from the same rewritten CSS: the `<link rel="stylesheet">` target
+ * itself, the HTML head's `<link rel="preload">` tags (via the
+ * `preloadFontFiles` list computed by `findFontFilesInCss`), and the HTTP
+ * `Link:` response header (via `buildAppPageFontLinkHeader` in
+ * `server/app-page-execution.ts`).
  *
  * Without this rewrite, all three emit the dev-machine filesystem path
  * (e.g. `/home/user/project/.vinext/fonts/geist-<hash>/geist-<hash>.woff2`)
@@ -428,16 +445,15 @@ async function fetchAndCacheFont(
   cssUrl: string,
   family: string,
   cacheDir: string,
-): Promise<string> {
+): Promise<{ css: string; fontDir: string }> {
   // Use a hash of the URL for the cache key
-  const { createHash } = await import("node:crypto");
   const urlHash = createHash("md5").update(cssUrl).digest("hex").slice(0, 12);
   const fontDir = path.join(cacheDir, `${family.toLowerCase().replace(/\s+/g, "-")}-${urlHash}`);
 
   // Check if already cached
   const cachedCSSPath = path.join(fontDir, "style.css");
   if (fs.existsSync(cachedCSSPath)) {
-    return fs.readFileSync(cachedCSSPath, "utf-8");
+    return { css: fs.readFileSync(cachedCSSPath, "utf-8"), fontDir };
   }
 
   // Fetch CSS from Google Fonts (woff2 user-agent gives woff2 URLs)
@@ -487,22 +503,22 @@ async function fetchAndCacheFont(
     // Rewrite every remote Google Fonts CDN URL in the cached CSS to the
     // absolute filesystem path of the locally-downloaded font file. This
     // cache file is read back by the plugin and then run through
-    // `_rewriteCachedFontCssToServedUrls()` at embed time, which replaces
-    // the absolute `cacheDir` prefix with the served URL namespace under
+    // `_rewriteCachedFontCssToServedUrls()` before being written out as the
+    // served `font.<hash>.css` stylesheet, which replaces the absolute
+    // `cacheDir` prefix with the served URL namespace under
     // `/<assetsDir>/_vinext_fonts/`. The filesystem path is only the
-    // on-disk intermediate form — it must never reach the bundle, the
-    // injected `<style data-vinext-fonts>` block, the HTML `<link
-    // rel="preload">` tags, or the HTTP `Link:` response header. An
-    // earlier version of this code claimed "Vite will resolve /@fs/ for
-    // dev, or asset for build", which was never true: the CSS is
-    // embedded as a JavaScript string literal and Vite's asset pipeline
-    // does not scan string literals. Do not resurrect that assumption.
+    // on-disk intermediate form — it must never reach the served
+    // stylesheet, the HTML `<link rel="preload">` tags, or the HTTP
+    // `Link:` response header. An earlier version of this code claimed
+    // "Vite will resolve /@fs/ for dev, or asset for build", which was
+    // never true: Vite's asset pipeline never scans this CSS. Do not
+    // resurrect that assumption.
     css = css.split(fontUrl).join(filePath.replaceAll("\\", "/"));
   }
 
   // Cache the rewritten CSS
   fs.writeFileSync(cachedCSSPath, css);
-  return css;
+  return { css, fontDir };
 }
 
 // ── Plugin factories ──────────────────────────────────────────────────────────
@@ -651,7 +667,8 @@ export function _findCallEnd(code: string, objEnd: number): number | null {
 export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: string): Plugin {
   // Vite does not bind `this` to the plugin object when calling hooks, so
   // plugin state must be held in closure variables rather than as properties.
-  const fontCache = new Map<string, string>(); // url -> local @font-face CSS
+  // url -> cached @font-face CSS (with filesystem paths) + its cache dir
+  const fontCache = new Map<string, { css: string; fontDir: string }>();
   let cacheDir = "";
 
   return {
@@ -667,8 +684,8 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
     // .vinext/fonts/ tree is served directly under the same URL prefix that
     // `_rewriteCachedFontCssToServedUrls()` embeds into the @font-face CSS
     // (`/<assetsDir>/_vinext_fonts/...`). Without this hook the rewritten
-    // URLs 404 — and once `_vinext.font.selfHostedCSS` is injected, the shim no longer
-    // emits the fonts.googleapis.com `<link>`, so a 404 here means no
+    // URLs 404 — and once `_vinext.font.selfHostedCSSUrl` is injected, the shim no
+    // longer emits the fonts.googleapis.com `<link>`, so a 404 here means no
     // glyphs render at all (no CDN fallback path).
     configureServer(server) {
       if (!cacheDir) return;
@@ -875,11 +892,11 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
           const cssUrl = buildGoogleFontsUrl(family, axes, validated.display);
 
           // Check cache
-          let localCSS = fontCache.get(cssUrl);
-          if (!localCSS) {
+          let cachedFont = fontCache.get(cssUrl);
+          if (!cachedFont) {
             try {
-              localCSS = await fetchAndCacheFont(cssUrl, family, cacheDir);
-              fontCache.set(cssUrl, localCSS);
+              cachedFont = await fetchAndCacheFont(cssUrl, family, cacheDir);
+              fontCache.set(cssUrl, cachedFont);
             } catch (err) {
               if (err instanceof GoogleFontsHttpError) {
                 // HTTP 4xx/5xx from Google means the URL is malformed or
@@ -900,7 +917,7 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
 
           // Rewrite absolute `.vinext/fonts/` filesystem paths in the cached
           // CSS to served URLs under `/<assetsDir>/_vinext_fonts/` so the
-          // embedded `_vinext.font.selfHostedCSS` string has origin-relative URLs that
+          // external stylesheet written below has origin-relative URLs that
           // the browser can actually resolve. The plugin's writeBundle hook
           // copies the referenced font files to the matching location under
           // the client output directory so the URLs serve 200s, not 404s.
@@ -913,11 +930,48 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
           // customizes `build.assetsDir` (e.g. to `"static"`) sees both
           // the CSS and the copy target move together — otherwise the
           // rewritten URLs would 404 in production.
+          const { css: localCSS, fontDir } = cachedFont;
           const servedCSS = _rewriteCachedFontCssToServedUrls(
             localCSS,
             cacheDir,
             transformAssetsDir,
           );
+
+          // Decide which font files get a `<link rel="preload">`. Next.js
+          // keeps every subset's @font-face rule in the CSS — the browser
+          // only downloads files whose unicode-range matches page content —
+          // but preloads only the files whose `/* subset */` comment is in
+          // the requested `subsets`, and nothing at all for `preload: false`
+          // (issue #1897).
+          const preloadFontFiles = findFontFilesInCss(
+            servedCSS,
+            validated.preload ? validated.subsets : undefined,
+          )
+            .filter((file) => file.preloadFontFile)
+            .map((file) => file.fontFileUrl);
+
+          // Write the served @font-face CSS as an external stylesheet next
+          // to the cached font files so the HTML can reference a cacheable
+          // `<link rel="stylesheet">` instead of inlining the full block
+          // into every response (issue #1897). In dev the configureServer
+          // middleware serves it straight from the cache dir; in build the
+          // writeBundle hook copies it into the client output alongside the
+          // font files. Stale content hashes from earlier builds are removed
+          // so the cache dir doesn't accumulate dead stylesheets.
+          const servedCssFileName = `font.${createHash("md5").update(servedCSS).digest("hex").slice(0, 8)}.css`;
+          const servedCssPath = path.join(fontDir, servedCssFileName);
+          for (const entry of fs.readdirSync(fontDir)) {
+            if (SERVED_FONT_CSS_RE.test(entry) && entry !== servedCssFileName) {
+              fs.rmSync(path.join(fontDir, entry), { force: true });
+            }
+          }
+          if (!fs.existsSync(servedCssPath)) {
+            fs.writeFileSync(servedCssPath, servedCSS);
+          }
+          const selfHostedCSSUrl = `/${transformAssetsDir || DEFAULT_ASSETS_DIR}/${VINEXT_FONT_URL_NAMESPACE}/${path
+            .relative(cacheDir, servedCssPath)
+            .split(path.sep)
+            .join("/")}`;
           const fallbackMetrics =
             validated.adjustFontFallback === false
               ? undefined
@@ -932,8 +986,14 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
           const validatedFontStyle =
             validated.styles.length === 1 ? validated.styles[0] : undefined;
 
-          // Inject the internal transform-to-runtime payload into the options object.
-          const internalFontProperties = [`selfHostedCSS: ${JSON.stringify(servedCSS)}`];
+          // Inject the internal transform-to-runtime payload into the options
+          // object. The @font-face CSS itself is NOT embedded — the runtime
+          // only needs the stylesheet URL plus the subset-filtered preload
+          // list, which keeps the server bundle and the HTML small.
+          const internalFontProperties = [
+            `selfHostedCSSUrl: ${JSON.stringify(selfHostedCSSUrl)}`,
+            `preloadFontFiles: ${JSON.stringify(preloadFontFiles)}`,
+          ];
           if (adjustedFallbackCSS) {
             internalFontProperties.push(
               `adjustedFallbackCSS: ${JSON.stringify(adjustedFallbackCSS)}`,
@@ -1079,9 +1139,10 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
         const assetsDir = this.environment.config?.build?.assetsDir ?? DEFAULT_ASSETS_DIR;
         const targetRoot = path.join(outDir, assetsDir, VINEXT_FONT_URL_NAMESPACE);
 
-        // Recursive copy of every cached font file. Skip the companion
-        // `style.css` artifact — that is only read by the build plugin
-        // itself, never served at runtime.
+        // Recursive copy of every cached font file plus the served
+        // `font.<hash>.css` stylesheets. Skip the companion `style.css`
+        // artifact — it contains absolute filesystem paths and is only read
+        // by the build plugin itself, never served at runtime.
         const stack: string[] = [cacheDir];
         while (stack.length > 0) {
           const dir = stack.pop();
@@ -1092,7 +1153,12 @@ export function createGoogleFontsPlugin(fontGoogleShimPath: string, shimsDir: st
               stack.push(src);
               continue;
             }
-            if (!/\.(woff2?|ttf|otf|eot)$/i.test(entry.name)) continue;
+            if (
+              !/\.(woff2?|ttf|otf|eot)$/i.test(entry.name) &&
+              !SERVED_FONT_CSS_RE.test(entry.name)
+            ) {
+              continue;
+            }
             const relative = path.relative(cacheDir, src);
             const dest = path.join(targetRoot, relative);
             fs.mkdirSync(path.dirname(dest), { recursive: true });
diff --git a/packages/vinext/src/shims/font-google-base.ts b/packages/vinext/src/shims/font-google-base.ts
index 39d4e3c8a..3d59ac8d3 100644
--- a/packages/vinext/src/shims/font-google-base.ts
+++ b/packages/vinext/src/shims/font-google-base.ts
@@ -15,10 +15,13 @@ import {
  * Provides a compatible shim for Next.js Google Fonts.
  *
  * Two modes:
- * 1. **Dev / CDN mode** (default): Loads fonts from Google Fonts CDN via <link> tags.
- * 2. **Self-hosted mode** (production build): The vinext:google-fonts Vite plugin
- *    fetches font CSS + .woff2 files at build time, caches them locally, and injects
- *    @font-face CSS pointing at local assets. No requests to Google at runtime.
+ * 1. **CDN mode** (fallback for dynamic options): Loads fonts from the Google
+ *    Fonts CDN via <link> tags.
+ * 2. **Self-hosted mode** (static calls, dev + production build): The
+ *    vinext:google-fonts Vite plugin fetches font CSS + .woff2 files at build
+ *    time, caches them locally, writes the @font-face CSS as an external
+ *    stylesheet, and injects its URL plus a subset-filtered preload list.
+ *    No requests to Google at runtime.
  *
  * Usage:
  *   import { Inter } from 'next/font/google';
@@ -50,6 +53,21 @@ export type FontResult = {
 };
 
 type InternalGoogleFontRuntimeOptions = {
+  /**
+   * Served URL of the external `@font-face` stylesheet written by the build
+   * plugin (`/<assetsDir>/_vinext_fonts/<family>-<hash>/font.<hash>.css`).
+   * Preferred over `selfHostedCSS`: the CSS stays out of the HTML and the
+   * bundle, and the browser/CDN can cache it (issue #1897).
+   */
+  selfHostedCSSUrl?: string;
+  /**
+   * Subset-filtered font file URLs to emit as `<link rel="preload">`.
+   * Computed at build time from the `/* subset *\/` comments in the Google
+   * Fonts CSS against the caller's `subsets` option; empty when
+   * `preload: false`.
+   */
+  preloadFontFiles?: string[];
+  /** Legacy inline @font-face CSS payload. Superseded by `selfHostedCSSUrl`. */
   selfHostedCSS?: string;
   adjustedFallbackCSS?: string;
   fontWeight?: number;
@@ -150,6 +168,7 @@ function createFontIdentity(
       normalizeStringOrBooleanOption(options.adjustFontFallback),
       normalizeStringSetOption(options.axes),
       options._vinext?.font?.selfHostedCSS ?? "",
+      options._vinext?.font?.selfHostedCSSUrl ?? "",
       options._vinext?.font?.fontWeight?.toString() ?? "",
       options._vinext?.font?.fontStyle ?? "",
     ].join("\0"),
@@ -162,10 +181,10 @@ function createFontIdentity(
  * In production this code path is dead. The build plugin
  * (`vinext:google-fonts` in `src/plugins/fonts.ts`) statically resolves
  * each font call's axis values against the bundled metadata, fetches the
- * Google Fonts CSS, and injects the resulting CSS as
- * `_vinext.font.selfHostedCSS` so the runtime never queries Google. The shim
- * only reaches this builder when the plugin's static parser bails (dynamic
- * options, eval-only shapes), which is dev-only.
+ * Google Fonts CSS, writes it as an external stylesheet, and injects its
+ * URL as `_vinext.font.selfHostedCSSUrl` so the runtime never queries
+ * Google. The shim only reaches this builder when the plugin's static
+ * parser bails (dynamic options, eval-only shapes), which is dev-only.
  *
  * The dev fallback intentionally has no metadata: shipping the 388 KB
  * `font-data.json` to the Worker bundle would dwarf the rest of the shim,
@@ -351,13 +370,12 @@ function extractFontUrlsFromCSS(css: string): string[] {
 }
 
 /**
- * Collect font file URLs from self-hosted CSS for preload link generation.
+ * Collect font file URLs for `<link rel="preload">` generation.
  * Only collects on the server (SSR). Deduplicates by href using a Set for O(1) lookups.
  */
-function collectFontPreloadsFromCSS(css: string): void {
+function collectFontPreloads(urls: readonly string[]): void {
   if (typeof document !== "undefined") return; // client-side, skip
 
-  const urls = extractFontUrlsFromCSS(css);
   for (const href of urls) {
     if (!ssrFontPreloadHrefs.has(href)) {
       ssrFontPreloadHrefs.add(href);
@@ -366,6 +384,15 @@ function collectFontPreloadsFromCSS(css: string): void {
   }
 }
 
+/**
+ * Collect font file URLs from self-hosted CSS for preload link generation.
+ * Legacy path for inline `selfHostedCSS` payloads — the build plugin now
+ * passes an explicit subset-filtered `preloadFontFiles` list instead.
+ */
+function collectFontPreloadsFromCSS(css: string): void {
+  collectFontPreloads(extractFontUrlsFromCSS(css));
+}
+
 /** Track injected self-hosted @font-face blocks (deduplicate) */
 const injectedSelfHosted = new Set<string>();
 
@@ -393,6 +420,33 @@ function injectSelfHostedCSS(css: string): void {
   document.head.appendChild(style);
 }
 
+/**
+ * Reference the external self-hosted @font-face stylesheet written by the
+ * build plugin. On the server the URL is collected for SSR head injection
+ * (`<link rel="stylesheet">`); on the client a `<link>` tag is appended only
+ * when the SSR-rendered document doesn't already contain one.
+ */
+function injectSelfHostedStylesheet(url: string): void {
+  if (injectedFonts.has(url)) return;
+  injectedFonts.add(url);
+
+  if (typeof document === "undefined") {
+    // SSR: collect for head injection
+    if (!ssrFontUrls.includes(url)) {
+      ssrFontUrls.push(url);
+    }
+    return;
+  }
+
+  // Client: SSR already emitted the <link> in the initial HTML, so only
+  // append one for client-only loads (e.g. a font added during HMR).
+  if (document.querySelector(`link[rel="stylesheet"][href="${url}"]`)) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+
 export type FontLoader = (options?: FontLoaderOptions) => FontResult;
 
 export function createFontLoader(family: string): FontLoader {
@@ -433,8 +487,18 @@ export function createFontLoader(family: string): FontLoader {
       google: true,
     });
 
-    if (internal?.selfHostedCSS) {
-      // Self-hosted mode: inject local @font-face CSS instead of CDN link
+    if (internal?.selfHostedCSSUrl) {
+      // Self-hosted mode: reference the external @font-face stylesheet and
+      // preload only the subset-filtered files the build plugin selected.
+      // Preload collection runs outside the stylesheet dedupe so a second
+      // loader call sharing the same stylesheet (same family/axes) but
+      // requesting different subsets still contributes its preloads.
+      injectSelfHostedStylesheet(internal.selfHostedCSSUrl);
+      if (internal.preloadFontFiles && internal.preloadFontFiles.length > 0) {
+        collectFontPreloads(internal.preloadFontFiles);
+      }
+    } else if (internal?.selfHostedCSS) {
+      // Legacy self-hosted mode: inject inline @font-face CSS
       injectSelfHostedCSS(internal.selfHostedCSS);
     } else {
       // CDN mode: inject <link> to Google Fonts
diff --git a/tests/app-router-font-google-prod.test.ts b/tests/app-router-font-google-prod.test.ts
index 9233a56b5..e7a3550e2 100644
--- a/tests/app-router-font-google-prod.test.ts
+++ b/tests/app-router-font-google-prod.test.ts
@@ -83,7 +83,11 @@ describe("App Router Production server self-hosted next/font/google headers", ()
         const isMono = url.includes("Geist+Mono") || url.includes("Geist%20Mono");
         const family = isMono ? "Geist Mono" : "Geist";
         const gstaticUrl = `https://fonts.gstatic.com/s/${isMono ? "geistmono" : "geist"}/v1/${isMono ? "geistmono" : "geist"}-latin.woff2`;
+        // The `/* latin */` subset comment matches the real css2 response
+        // format — the build plugin derives the preload list from these
+        // comments, so omitting it would mean no preloads at all.
         const css = [
+          "/* latin */",
           "@font-face {",
           `  font-family: '${family}';`,
           "  font-style: normal;",
@@ -169,19 +173,32 @@ describe("App Router Production server self-hosted next/font/google headers", ()
     expect(html).not.toContain(".vinext/fonts");
   });
 
-  it("emits served URLs in the injected <style data-vinext-fonts> block", async () => {
-    // The injected @font-face CSS is the upstream source of truth the body
+  it("emits served URLs in the external @font-face stylesheet", async () => {
+    // The served @font-face CSS is the upstream source of truth the head
     // `<link>` tags and HTTP `Link:` header are both derived from — a
     // regression here would reproduce the bug across all three emission
-    // paths at once.
+    // paths at once. Since issue #1897, the CSS is no longer inlined into
+    // the HTML; it is served as an external cacheable stylesheet referenced
+    // by a `<link rel="stylesheet">` tag.
     const res = await fetch(`${fontBaseUrl}/`);
     const html = await res.text();
-    const styleMatch = html.match(/<style data-vinext-fonts[^>]*>([\s\S]*?)<\/style>/);
-    expect(styleMatch).not.toBeNull();
-    const styleContent = styleMatch![1];
-    expect(styleContent).toMatch(/url\(\/_next\/static\/_vinext_fonts\/[^)]+\.woff2\)/);
-    expect(styleContent).not.toContain(FONT_FIXTURE_DIR);
-    expect(styleContent).not.toContain(".vinext/fonts");
+    const linkMatch = html.match(
+      /<link rel="stylesheet"[^>]*href="(\/_next\/static\/_vinext_fonts\/[^"]+\.css)"/,
+    );
+    expect(linkMatch).not.toBeNull();
+    const cssRes = await fetch(`${fontBaseUrl}${linkMatch![1]}`);
+    expect(cssRes.status).toBe(200);
+    expect(cssRes.headers.get("content-type")).toContain("text/css");
+    const cssContent = await cssRes.text();
+    expect(cssContent).toMatch(/url\(\/_next\/static\/_vinext_fonts\/[^)]+\.woff2\)/);
+    expect(cssContent).not.toContain(FONT_FIXTURE_DIR);
+    expect(cssContent).not.toContain(".vinext/fonts");
+    // The HTML itself must not inline any @font-face src urls.
+    const styleBlocks = [...html.matchAll(/<style data-vinext-fonts[^>]*>([\s\S]*?)<\/style>/g)];
+    for (const [, styleContent] of styleBlocks) {
+      expect(styleContent).not.toContain("url(");
+      expect(styleContent).not.toContain(FONT_FIXTURE_DIR);
+    }
   });
 
   it("serves the cached font files copied into the client output", async () => {
diff --git a/tests/app-router-font-google-subsets-prod.test.ts b/tests/app-router-font-google-subsets-prod.test.ts
new file mode 100644
index 000000000..01bf9b41c
--- /dev/null
+++ b/tests/app-router-font-google-subsets-prod.test.ts
@@ -0,0 +1,211 @@
+import fs from "node:fs";
+import path from "node:path";
+import { createBuilder } from "vite";
+import { beforeAll, afterAll, describe, expect, it } from "vitest";
+import vinext from "../packages/vinext/src/index.js";
+
+// Regression tests for issue #1897 — `next/font/google` Next.js parity:
+//
+//  1. The `subsets` option must filter which font files are *preloaded*.
+//     Google Fonts CSS responses contain one `@font-face` block per
+//     available subset (each annotated with a `/* subset */` comment and a
+//     `unicode-range`). Next.js keeps every block in the CSS — browsers
+//     only download files whose unicode-range matches page content — but
+//     emits `<link rel="preload">` only for files belonging to the
+//     requested `subsets` (and nothing when `preload: false`). vinext used
+//     to preload every subset's file regardless of the option.
+//
+//  2. The generated `@font-face` rules must be served as an external,
+//     cacheable stylesheet (like Next.js's extracted CSS chunks), not
+//     inlined into every HTML response as a `<style data-vinext-fonts>`
+//     block.
+describe("App Router production server next/font/google subsets + external CSS", () => {
+  const FIXTURE_DIR = path.resolve(import.meta.dirname, "./fixtures/font-google-subsets");
+  const outDir = path.resolve(FIXTURE_DIR, "dist");
+  const cacheDir = path.resolve(FIXTURE_DIR, ".vinext");
+  const nodeModulesLink = path.join(FIXTURE_DIR, "node_modules");
+  let server: import("node:http").Server | undefined;
+  let baseUrl: string;
+
+  // Faithful reduction of a real Google Fonts css2 response: one
+  // @font-face block per subset, each preceded by a `/* subset */` comment,
+  // each pointing at a distinct gstatic file.
+  const subsetCss = (family: string, slug: string): string =>
+    ["cyrillic", "latin-ext", "latin"]
+      .map((subset) =>
+        [
+          `/* ${subset} */`,
+          "@font-face {",
+          `  font-family: '${family}';`,
+          "  font-style: normal;",
+          "  font-weight: 100 900;",
+          "  font-display: swap;",
+          `  src: url(https://fonts.gstatic.com/s/${slug}/v1/${slug}-${subset}.woff2) format('woff2');`,
+          "  unicode-range: U+0000-00FF;",
+          "}",
+        ].join("\n"),
+      )
+      .join("\n");
+
+  beforeAll(async () => {
+    fs.rmSync(outDir, { recursive: true, force: true });
+    fs.rmSync(cacheDir, { recursive: true, force: true });
+
+    const projectNodeModules = path.resolve(import.meta.dirname, "../node_modules");
+    fs.rmSync(nodeModulesLink, { recursive: true, force: true });
+    fs.symlinkSync(projectNodeModules, nodeModulesLink);
+
+    const originalFetch = globalThis.fetch;
+    const resolveFetchUrl = (input: unknown): string => {
+      if (typeof input === "string") return input;
+      if (input instanceof URL) return input.toString();
+      if (typeof Request !== "undefined" && input instanceof Request) return input.url;
+      return String(input);
+    };
+    globalThis.fetch = async (input: unknown, init?: RequestInit) => {
+      const url = resolveFetchUrl(input);
+      if (url.includes("fonts.googleapis.com")) {
+        const isMono = url.includes("Geist+Mono") || url.includes("Geist%20Mono");
+        const css = isMono ? subsetCss("Geist Mono", "geistmono") : subsetCss("Geist", "geist");
+        return new Response(css, { status: 200, headers: { "content-type": "text/css" } });
+      }
+      if (url.includes("fonts.gstatic.com")) {
+        return new Response(
+          new Uint8Array([0x77, 0x4f, 0x46, 0x32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
+          { status: 200, headers: { "content-type": "font/woff2" } },
+        );
+      }
+      return originalFetch(input as RequestInfo, init);
+    };
+
+    try {
+      const builder = await createBuilder({
+        root: FIXTURE_DIR,
+        configFile: false,
+        plugins: [vinext({ appDir: FIXTURE_DIR })],
+        logLevel: "silent",
+      });
+      await builder.buildApp();
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+
+    const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
+    ({ server } = await startProdServer({
+      port: 0,
+      outDir,
+      noCompression: true,
+    }));
+    const addr = server!.address();
+    const port = typeof addr === "object" && addr ? addr.port : 4213;
+    baseUrl = `http://localhost:${port}`;
+  }, 60000);
+
+  afterAll(() => {
+    server?.close();
+    fs.rmSync(outDir, { recursive: true, force: true });
+    fs.rmSync(cacheDir, { recursive: true, force: true });
+    fs.rmSync(nodeModulesLink, { recursive: true, force: true });
+  });
+
+  /** Extract subset → served file URL mapping from served @font-face CSS. */
+  function parseSubsetFiles(css: string): Map<string, string> {
+    const map = new Map<string, string>();
+    let currentSubset = "";
+    for (const line of css.split("\n")) {
+      const subsetMatch = /^\/\* (.+?) \*\//.exec(line.trim());
+      if (subsetMatch) {
+        currentSubset = subsetMatch[1];
+        continue;
+      }
+      const urlMatch = /src: url\((.+?)\)/.exec(line);
+      if (urlMatch && currentSubset) {
+        map.set(currentSubset, urlMatch[1]);
+      }
+    }
+    return map;
+  }
+
+  async function getFontStylesheets(html: string): Promise<Map<string, string>> {
+    // family stylesheet href -> css content
+    const hrefs = [
+      ...html.matchAll(/<link rel="stylesheet"[^>]*href="(\/[^"]*_vinext_fonts\/[^"]+\.css)"/g),
+    ].map((m) => m[1]);
+    const result = new Map<string, string>();
+    for (const href of hrefs) {
+      const res = await fetch(`${baseUrl}${href}`);
+      expect(res.status).toBe(200);
+      result.set(href, await res.text());
+    }
+    return result;
+  }
+
+  it("only preloads font files for the requested subsets", async () => {
+    const res = await fetch(`${baseUrl}/`);
+    expect(res.status).toBe(200);
+    const html = await res.text();
+
+    const preloads = [
+      ...html.matchAll(/<link rel="preload"[^>]*href="([^"]+\.woff2)"[^>]*as="font"/g),
+    ].map((m) => m[1]);
+
+    // Geist requests only `latin` → exactly one preload. Geist Mono has
+    // `preload: false` → zero. Before the fix, all 3 subsets of both
+    // families were preloaded (6 links).
+    expect(preloads).toHaveLength(1);
+
+    // The single preloaded file must be Geist's latin file. Map served
+    // file URLs back to subsets via the external stylesheet's comments.
+    const stylesheets = await getFontStylesheets(html);
+    const allCss = [...stylesheets.values()].join("\n");
+    const geistCss = [...stylesheets.values()].find((css) => css.includes("'Geist'"));
+    expect(geistCss).toBeTruthy();
+    const subsetFiles = parseSubsetFiles(geistCss!);
+    expect(subsetFiles.get("latin")).toBe(preloads[0]);
+
+    // All subsets must still be present in the stylesheet (unicode-range
+    // lets the browser pick) — filtering applies to preloads only.
+    expect(allCss).toContain("/* cyrillic */");
+    expect(allCss).toContain("/* latin-ext */");
+    expect(allCss).toContain("/* latin */");
+  });
+
+  it("only includes requested-subset files in the HTTP Link header", async () => {
+    const res = await fetch(`${baseUrl}/`);
+    const linkHeader = res.headers.get("link") ?? "";
+    const fontLinks = linkHeader
+      .split(",")
+      .filter((part) => part.includes("rel=preload") && part.includes("as=font"));
+    expect(fontLinks).toHaveLength(1);
+    expect(fontLinks[0]).toContain("/_vinext_fonts/");
+  });
+
+  it("serves @font-face rules from an external cacheable stylesheet, not inline HTML", async () => {
+    const res = await fetch(`${baseUrl}/`);
+    const html = await res.text();
+
+    // The HTML must reference external font stylesheets…
+    const stylesheets = await getFontStylesheets(html);
+    expect(stylesheets.size).toBeGreaterThanOrEqual(1);
+    const allCss = [...stylesheets.values()].join("\n");
+    expect(allCss).toContain("@font-face");
+    expect(allCss).toMatch(/url\(\/_next\/static\/_vinext_fonts\/[^)]+\.woff2\)/);
+    expect(allCss).not.toContain(FIXTURE_DIR);
+
+    // …and the stylesheet must be cacheable.
+    const href = [...stylesheets.keys()][0];
+    const cssRes = await fetch(`${baseUrl}${href}`);
+    expect(cssRes.headers.get("content-type")).toContain("text/css");
+    expect(cssRes.headers.get("cache-control")).toContain("immutable");
+
+    // No self-hosted @font-face src urls may remain inline in the HTML.
+    // (The small class/variable/fallback rules may stay inline; the
+    // fallback @font-face uses `src: local(...)`, never `url(...)`.)
+    const inlineStyles = [
+      ...html.matchAll(/<style data-vinext-fonts[^>]*>([\s\S]*?)<\/style>/g),
+    ].map((m) => m[1]);
+    for (const style of inlineStyles) {
+      expect(style).not.toContain("url(");
+    }
+  });
+});
diff --git a/tests/e2e/app-router/font-google.spec.ts b/tests/e2e/app-router/font-google.spec.ts
index 7626ab921..9cb821c88 100644
--- a/tests/e2e/app-router/font-google.spec.ts
+++ b/tests/e2e/app-router/font-google.spec.ts
@@ -12,4 +12,15 @@ test("dev mode self-hosts Google fonts", async ({ page, request }) => {
   expect(res.status()).toBe(200);
   expect(res.headers()["content-type"]).toBe("font/woff2");
   expect((await res.body()).byteLength).toBeGreaterThan(1000);
+
+  // The @font-face rules are served as an external stylesheet (issue #1897),
+  // not inlined into the HTML — the dev middleware serves it from the cache.
+  const cssLink = html.match(
+    /<link rel="stylesheet"[^>]*href="(\/[^"]*_vinext_fonts\/[^"]+\.css)"/,
+  );
+  expect(cssLink).not.toBeNull();
+  const cssRes = await request.get(cssLink![1]);
+  expect(cssRes.status()).toBe(200);
+  expect(cssRes.headers()["content-type"]).toBe("text/css");
+  expect(await cssRes.text()).toContain("@font-face");
 });
diff --git a/tests/fixtures/font-google-subsets/app/layout.tsx b/tests/fixtures/font-google-subsets/app/layout.tsx
new file mode 100644
index 000000000..8dc5a0982
--- /dev/null
+++ b/tests/fixtures/font-google-subsets/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+
+// `geistSans` requests only the latin subset — Next.js parity requires that
+// only latin font files are preloaded even though the Google Fonts CSS
+// response contains @font-face rules for every available subset.
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+// `geistMono` opts out of preloading entirely — Next.js emits no
+// <link rel="preload"> for it at all.
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  preload: false,
+});
+
+export const metadata: Metadata = {
+  title: "Font Google Subsets Test",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/tests/fixtures/font-google-subsets/app/page.tsx b/tests/fixtures/font-google-subsets/app/page.tsx
new file mode 100644
index 000000000..5b0726473
--- /dev/null
+++ b/tests/fixtures/font-google-subsets/app/page.tsx
@@ -0,0 +1,8 @@
+export default function HomePage() {
+  return (
+    <main>
+      <h1>Font Google Subsets Test</h1>
+      <p>This page tests subset-filtered preloads and externalized font CSS.</p>
+    </main>
+  );
+}
diff --git a/tests/fixtures/font-google-subsets/package.json b/tests/fixtures/font-google-subsets/package.json
new file mode 100644
index 000000000..fc86bf244
--- /dev/null
+++ b/tests/fixtures/font-google-subsets/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "font-google-subsets-fixture",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@vitejs/plugin-rsc": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-server-dom-webpack": "catalog:",
+    "vinext": "workspace:*",
+    "vite": "catalog:"
+  },
+  "devDependencies": {
+    "vite-plus": "catalog:"
+  }
+}
diff --git a/tests/font-google-build.test.ts b/tests/font-google-build.test.ts
index 4b02d289c..7a27ce351 100644
--- a/tests/font-google-build.test.ts
+++ b/tests/font-google-build.test.ts
@@ -82,6 +82,6 @@ describe("font-google build integration", () => {
     const content = await fs.readFile(buildOutputPath, "utf-8");
     expect(content).toContain("Geist");
     expect(content).toContain("_vinext");
-    expect(content).toContain("selfHostedCSS");
+    expect(content).toContain("selfHostedCSSUrl");
   }, 120000);
 });
diff --git a/tests/font-google.test.ts b/tests/font-google.test.ts
index 2aeed57fd..d1dc0cbb8 100644
--- a/tests/font-google.test.ts
+++ b/tests/font-google.test.ts
@@ -737,9 +737,17 @@ describe("vinext:google-fonts plugin", () => {
     expect(result).not.toBeNull();
     expect(result.code).toContain("virtual:vinext-google-fonts?");
     expect(result.code).toContain("_vinext");
-    expect(result.code).toContain("selfHostedCSS");
+    // The @font-face CSS is not embedded in the bundle — the payload
+    // carries the external stylesheet URL plus the subset-filtered
+    // preload list (issue #1897).
+    expect(result.code).toContain("selfHostedCSSUrl");
+    expect(result.code).toContain("preloadFontFiles");
     expect(result.code).toContain("adjustedFallbackCSS");
-    expect(result.code).toContain("@font-face");
+    // The downloaded @font-face blocks stay out of the bundle (only the
+    // tiny `src: local(...)` fallback face from adjustedFallbackCSS may
+    // appear inline) — unicode-range only occurs in Google's blocks.
+    expect(result.code).not.toContain("selfHostedCSS: ");
+    expect(result.code).not.toContain("unicode-range");
     expect(result.code).toContain("Inter");
     expect(result.map).toBeDefined();
 
@@ -754,6 +762,14 @@ describe("vinext:google-fonts plugin", () => {
     expect(files).toContain("style.css");
     expect(files.some((f: string) => f.endsWith(".woff2"))).toBe(true);
 
+    // The served external stylesheet is written next to the cached files
+    // and contains the @font-face rules that used to be embedded.
+    const servedCss = files.find((f: string) => /^font\.[0-9a-f]{8}\.css$/.test(f));
+    expect(servedCss).toBeDefined();
+    const servedCssContent = fs.readFileSync(path.join(cacheDir, interDir!, servedCss!), "utf-8");
+    expect(servedCssContent).toContain("@font-face");
+    expect(servedCssContent).toContain("Inter");
+
     // Clean up
     fs.rmSync(root, { recursive: true, force: true });
   }, 15000); // Network timeout
@@ -959,7 +975,7 @@ describe("vinext:google-fonts plugin", () => {
       // Must not have a double-comma — that would be a JS syntax error
       expect(result.code).not.toMatch(/,\s*,/);
       // Verify the generated code is syntactically valid by checking structure
-      expect(result.code).toContain('selfHostedCSS: "');
+      expect(result.code).toContain('selfHostedCSSUrl: "');
     } finally {
       fs.rmSync(root, { recursive: true, force: true });
     }
@@ -986,9 +1002,8 @@ describe("vinext:google-fonts plugin", () => {
       const result = await transform.call(plugin, code, "/app/layout.tsx");
       expect(result).not.toBeNull();
       expect(result.code).toContain("virtual:vinext-google-fonts?");
-      // selfHostedCSS must have been injected — without the fix this was absent
-      expect(result.code).toContain("selfHostedCSS");
-      expect(result.code).toContain("@font-face");
+      // The font payload must have been injected — without the fix this was absent
+      expect(result.code).toContain("selfHostedCSSUrl");
       // Verify the injected object is syntactically valid (no double-comma)
       expect(result.code).not.toMatch(/,\s*,/);
     } finally {
@@ -1267,12 +1282,17 @@ describe("fetchAndCacheFont", () => {
     const result = await transform.call(plugin, code, "/app/layout.tsx");
     expect(result).not.toBeNull();
 
-    // Verify the transformed code contains self-hosted CSS with @font-face
-    expect(result.code).toContain("selfHostedCSS");
-    expect(result.code).toContain("@font-face");
+    // Verify the transformed code carries the self-hosted payload: the
+    // external stylesheet URL and the subset-filtered preload list. The
+    // @font-face CSS itself lives in the cached `font.<hash>.css`, not in
+    // the bundle (issue #1897).
+    expect(result.code).toContain("selfHostedCSSUrl");
+    expect(result.code).toContain("/_vinext_fonts/");
     expect(result.code).toContain("Inter");
     // Should reference local file paths, not googleapis.com CDN
     expect(result.code).not.toContain("fonts.gstatic.com");
+    // Inter's latin subset was requested, so the preload list must carry
+    // at least one served .woff2 URL.
     expect(result.code).toContain(".woff2");
   }, 15000);
 
diff --git a/tests/google-fonts/find-font-files-in-css.test.ts b/tests/google-fonts/find-font-files-in-css.test.ts
new file mode 100644
index 000000000..b8bf0fb93
--- /dev/null
+++ b/tests/google-fonts/find-font-files-in-css.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vite-plus/test";
+import { findFontFilesInCss } from "../../packages/vinext/src/build/google-fonts/find-font-files-in-css.js";
+
+// Ported behavior from Next.js: packages/font/src/google/find-font-files-in-css.ts
+// Google Fonts css2 responses annotate each @font-face block with a
+// `/* <subset> */` comment; only files whose subset was requested are
+// flagged for preloading (issue #1897).
+
+const GOOGLE_CSS = [
+  "/* cyrillic */",
+  "@font-face {",
+  "  font-family: 'Inter';",
+  "  src: url(https://fonts.gstatic.com/s/inter/v20/cyrillic.woff2) format('woff2');",
+  "  unicode-range: U+0301, U+0400-045F;",
+  "}",
+  "/* latin-ext */",
+  "@font-face {",
+  "  font-family: 'Inter';",
+  "  src: url(https://fonts.gstatic.com/s/inter/v20/latin-ext.woff2) format('woff2');",
+  "}",
+  "/* latin */",
+  "@font-face {",
+  "  font-family: 'Inter';",
+  "  src: url(https://fonts.gstatic.com/s/inter/v20/latin.woff2) format('woff2');",
+  "}",
+].join("\n");
+
+describe("findFontFilesInCss", () => {
+  it("collects every font file with its preload flag from subset comments", () => {
+    const files = findFontFilesInCss(GOOGLE_CSS, ["latin"]);
+    expect(files).toEqual([
+      {
+        fontFileUrl: "https://fonts.gstatic.com/s/inter/v20/cyrillic.woff2",
+        preloadFontFile: false,
+      },
+      {
+        fontFileUrl: "https://fonts.gstatic.com/s/inter/v20/latin-ext.woff2",
+        preloadFontFile: false,
+      },
+      {
+        fontFileUrl: "https://fonts.gstatic.com/s/inter/v20/latin.woff2",
+        preloadFontFile: true,
+      },
+    ]);
+  });
+
+  it("flags multiple requested subsets", () => {
+    const files = findFontFilesInCss(GOOGLE_CSS, ["latin", "cyrillic"]);
+    expect(files.filter((f) => f.preloadFontFile).map((f) => f.fontFileUrl)).toEqual([
+      "https://fonts.gstatic.com/s/inter/v20/cyrillic.woff2",
+      "https://fonts.gstatic.com/s/inter/v20/latin.woff2",
+    ]);
+  });
+
+  it("flags nothing when subsetsToPreload is undefined (preload: false)", () => {
+    const files = findFontFilesInCss(GOOGLE_CSS, undefined);
+    expect(files).toHaveLength(3);
+    expect(files.every((f) => !f.preloadFontFile)).toBe(true);
+  });
+
+  it("works against served URLs after the cache-dir rewrite", () => {
+    // The plugin runs this on the *served* CSS (urls already rewritten to
+    // /<assetsDir>/_vinext_fonts/...) — subset comments survive the rewrite.
+    const css = [
+      "/* latin */",
+      "@font-face {",
+      "  src: url(/_next/static/_vinext_fonts/inter-abc/inter-12345678.woff2) format('woff2');",
+      "}",
+    ].join("\n");
+    const files = findFontFilesInCss(css, ["latin"]);
+    expect(files).toEqual([
+      {
+        fontFileUrl: "/_next/static/_vinext_fonts/inter-abc/inter-12345678.woff2",
+        preloadFontFile: true,
+      },
+    ]);
+  });
+
+  it("deduplicates repeated file URLs", () => {
+    const css = ["/* latin */", "src: url(/a.woff2);", "src: url(/a.woff2);"].join("\n");
+    expect(findFontFilesInCss(css, ["latin"])).toHaveLength(1);
+  });
+
+  it("returns no preloads for CSS without subset comments", () => {
+    // Some mocked/edge-case CSS carries no comments; files are still
+    // collected (and self-hosted) but none are preloadable.
+    const css = "@font-face {\n  src: url(/a.woff2);\n}";
+    const files = findFontFilesInCss(css, ["latin"]);
+    expect(files).toEqual([{ fontFileUrl: "/a.woff2", preloadFontFile: false }]);
+  });
+});