From 27cc29ffd047f784a432512de45e1064b8f866cb Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 10:18:48 +0200
Subject: [PATCH 1/8] fix(fonts): take build config into account

---
 packages/astro/src/assets/fonts/constants.ts  |  3 +--
 .../assets/fonts/implementations/url-proxy.ts |  6 ++---
 .../src/assets/fonts/vite-plugin-fonts.ts     | 24 ++++++++++++-------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/astro/src/assets/fonts/constants.ts b/packages/astro/src/assets/fonts/constants.ts
index 09beec38245a..33993ef9c0b3 100644
--- a/packages/astro/src/assets/fonts/constants.ts
+++ b/packages/astro/src/assets/fonts/constants.ts
@@ -14,8 +14,7 @@ export const DEFAULTS: Defaults = {
 export const VIRTUAL_MODULE_ID = 'virtual:astro:assets/fonts/internal';
 export const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 
-// Requires a trailing slash
-export const URL_PREFIX = '/_astro/fonts/';
+export const ASSETS_DIR = 'fonts';
 export const CACHE_DIR = './fonts/';
 
 export const FONT_TYPES = ['woff2', 'woff', 'otf', 'ttf', 'eot'] as const;
diff --git a/packages/astro/src/assets/fonts/implementations/url-proxy.ts b/packages/astro/src/assets/fonts/implementations/url-proxy.ts
index a12e7b986f76..9c539c6f6490 100644
--- a/packages/astro/src/assets/fonts/implementations/url-proxy.ts
+++ b/packages/astro/src/assets/fonts/implementations/url-proxy.ts
@@ -1,20 +1,20 @@
 import type { DataCollector, Hasher, UrlProxy, UrlProxyContentResolver } from '../definitions.js';
 
 export function createUrlProxy({
-	base,
 	contentResolver,
 	hasher,
 	dataCollector,
+	getUrl,
 }: {
-	base: string;
 	contentResolver: UrlProxyContentResolver;
 	hasher: Hasher;
 	dataCollector: DataCollector;
+	getUrl: (hash: string) => string;
 }): UrlProxy {
 	return {
 		proxy({ url: originalUrl, type, data, collectPreload, init }) {
 			const hash = `${hasher.hashString(contentResolver.resolve(originalUrl))}.${type}`;
-			const url = base + hash;
+			const url = getUrl(hash);
 
 			dataCollector.collect({
 				url: originalUrl,
diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
index 44ebcd6f012e..37db0254eccf 100644
--- a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
+++ b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -2,7 +2,6 @@ import { mkdirSync, writeFileSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import { isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { removeTrailingForwardSlash } from '@astrojs/internal-helpers/path';
 import type { Plugin } from 'vite';
 import { collectErrorMetadata } from '../../core/errors/dev/utils.js';
 import { AstroError, AstroErrorData, isAstroError } from '../../core/errors/index.js';
@@ -11,10 +10,10 @@ import { formatErrorMessage } from '../../core/messages.js';
 import { getClientOutputDirectory } from '../../prerender/utils.js';
 import type { AstroSettings } from '../../types/astro.js';
 import {
+	ASSETS_DIR,
 	CACHE_DIR,
 	DEFAULTS,
 	RESOLVED_VIRTUAL_MODULE_ID,
-	URL_PREFIX,
 	VIRTUAL_MODULE_ID,
 } from './constants.js';
 import type {
@@ -46,6 +45,8 @@ import {
 import { createUrlProxy } from './implementations/url-proxy.js';
 import { orchestrate } from './orchestrate.js';
 import type { ConsumableMap, FontFileDataMap } from './types.js';
+import { joinPaths, prependForwardSlash } from '../../core/path.js';
+import { getAssetsPrefix } from '../utils/getAssetsPrefix.js';
 
 interface Options {
 	settings: AstroSettings;
@@ -78,7 +79,8 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 	// We don't need to take the trailing slash and build output configuration options
 	// into account because we only serve (dev) or write (build) static assets (equivalent
 	// to trailingSlash: never)
-	const baseUrl = removeTrailingForwardSlash(settings.config.base) + URL_PREFIX;
+	const assetsDir = joinPaths(settings.config.build.assets, ASSETS_DIR);
+	const baseUrl = joinPaths(settings.config.base, assetsDir);
 
 	let fontFileDataMap: FontFileDataMap | null = null;
 	let consumableMap: ConsumableMap | null = null;
@@ -153,7 +155,15 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 					? createLocalUrlProxyContentResolver({ errorHandler })
 					: createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					base: baseUrl,
+					getUrl: (hash) => {
+						const prefix = settings.config.build.assetsPrefix
+							? getAssetsPrefix(hash, settings.config.build.assetsPrefix)
+							: undefined;
+						if (prefix) {
+							return joinPaths(prefix, baseUrl, hash);
+						}
+						return prependForwardSlash(joinPaths(baseUrl, hash));
+					},
 					contentResolver,
 					hasher,
 					dataCollector,
@@ -209,9 +219,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 				}
 			});
 
-			// Base is taken into account by default. The prefix contains a traling slash,
-			// so it matches correctly any hash, eg. /_astro/fonts/abc.woff => abc.woff
-			server.middlewares.use(URL_PREFIX, async (req, res, next) => {
+			server.middlewares.use(prependForwardSlash(assetsDir), async (req, res, next) => {
 				if (!req.url) {
 					return next();
 				}
@@ -269,7 +277,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 
 			try {
 				const dir = getClientOutputDirectory(settings);
-				const fontsDir = new URL('.' + baseUrl, dir);
+				const fontsDir = new URL(`.${prependForwardSlash(baseUrl)}`, dir);
 				try {
 					mkdirSync(fontsDir, { recursive: true });
 				} catch (cause) {

From 00102d4242159ad74984d1b70315cf643766e3b1 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 10:35:39 +0200
Subject: [PATCH 2/8] fix: test

---
 packages/astro/test/units/assets/fonts/orchestrate.test.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/astro/test/units/assets/fonts/orchestrate.test.js b/packages/astro/test/units/assets/fonts/orchestrate.test.js
index c50cf5190d8b..07018f3bb7e4 100644
--- a/packages/astro/test/units/assets/fonts/orchestrate.test.js
+++ b/packages/astro/test/units/assets/fonts/orchestrate.test.js
@@ -22,6 +22,7 @@ import {
 	fakeHasher,
 	simpleErrorHandler,
 } from './utils.js';
+import { defaultLogger } from '../../test-utils.js';
 
 describe('fonts orchestrate()', () => {
 	it('works with local fonts', async () => {
@@ -58,11 +59,12 @@ describe('fonts orchestrate()', () => {
 			fontMetricsResolver: fakeFontMetricsResolver,
 			fontTypeExtractor,
 			fontFileReader: createFontaceFontFileReader({ errorHandler }),
+			logger: defaultLogger,
 			createUrlProxy: ({ local, ...params }) => {
 				const dataCollector = createDataCollector(params);
 				const contentResolver = createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					base: '/test',
+					getUrl: (hash) => `/test${hash}`,
 					contentResolver,
 					hasher,
 					dataCollector,
@@ -158,11 +160,12 @@ describe('fonts orchestrate()', () => {
 			fontMetricsResolver: fakeFontMetricsResolver,
 			fontTypeExtractor,
 			fontFileReader: createFontaceFontFileReader({ errorHandler }),
+			logger: defaultLogger,
 			createUrlProxy: ({ local, ...params }) => {
 				const dataCollector = createDataCollector(params);
 				const contentResolver = createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					base: '',
+					getUrl: (hash) => hash,
 					contentResolver,
 					hasher,
 					dataCollector,

From 09ad2eb4ce18ca62120ae5dd5ebe2cf2757d0959 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 11:08:20 +0200
Subject: [PATCH 3/8] feat: refactor fixture test

---
 packages/astro/test/fonts.test.js | 176 +++++++++++++++++++++---------
 1 file changed, 124 insertions(+), 52 deletions(-)

diff --git a/packages/astro/test/fonts.test.js b/packages/astro/test/fonts.test.js
index 47faef1c4510..a9d0c1694fc6 100644
--- a/packages/astro/test/fonts.test.js
+++ b/packages/astro/test/fonts.test.js
@@ -1,76 +1,110 @@
 // @ts-check
 import assert from 'node:assert/strict';
-import { after, before, describe, it } from 'node:test';
+import { describe, it } from 'node:test';
 import { fontProviders } from 'astro/config';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-describe('astro:fonts', () => {
-	/** @type {import('./test-utils.js').Fixture} */
-	let fixture;
-	/** @type {import('./test-utils.js').DevServer} */
-	let devServer;
+/**
+ * @param {Omit<import("./test-utils.js").AstroInlineConfig, 'root'>} inlineConfig
+ */
+async function createDevFixture(inlineConfig) {
+	const fixture = await loadFixture({ root: './fixtures/fonts/', ...inlineConfig });
+	const devServer = await fixture.startDevServer();
 
-	describe('<Font /> component', () => {
-		// TODO: remove once fonts are stabilized
-		describe('Fonts are not enabled', () => {
-			before(async () => {
-				fixture = await loadFixture({
-					root: './fixtures/fonts/',
-				});
-				devServer = await fixture.startDevServer();
-			});
-
-			after(async () => {
+	return {
+		fixture,
+		devServer,
+		run: async (/** @type {() => any} */ cb) => {
+			try {
+				return await cb();
+			} finally {
 				await devServer.stop();
-			});
+			}
+		},
+	};
+}
+/**
+ * @param {Omit<import("./test-utils.js").AstroInlineConfig, 'root'>} inlineConfig
+ */
+async function createBuildFixture(inlineConfig) {
+	const fixture = await loadFixture({ root: './fixtures/fonts/', ...inlineConfig });
+	await fixture.build({});
 
-			it('Throws an error if fonts are not enabled', async () => {
-				const res = await fixture.fetch('/');
-				const body = await res.text();
-				assert.equal(
-					body.includes('<script type="module" src="/@vite/client">'),
-					true,
-					'Body does not include Vite error overlay script',
-				);
-			});
-		});
+	return {
+		fixture,
+	};
+}
 
-		describe('Fonts are enabled', () => {
-			before(async () => {
-				fixture = await loadFixture({
-					root: './fixtures/fonts/',
-					experimental: {
-						fonts: [
-							{
-								name: 'Roboto',
-								cssVariable: '--font-roboto',
-								provider: fontProviders.fontsource(),
-							},
-						],
-					},
-				});
-				devServer = await fixture.startDevServer();
-			});
+/*
+TODO: clean up
+dev
+- respects build.assets
+- respects build.assetsPrefix
+build
+- respects build.assets
+- respects build.assetsPrefix
+*/
 
-			after(async () => {
-				await devServer.stop();
+describe('astro fonts', () => {
+	describe('dev', () => {
+		it('Includes styles', async () => {
+			const { fixture, run } = await createDevFixture({
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
 			});
-
-			it('Includes styles', async () => {
+			await run(async () => {
 				const res = await fixture.fetch('/');
 				const html = await res.text();
+				const $ = cheerio.load(html);
 				assert.equal(html.includes('<style>'), true);
+				assert.equal($('link[rel=preload][type=font/woff2]').attr('href'), undefined);
 			});
+		});
 
-			it('Includes links when preloading', async () => {
+		it('Includes links when preloading', async () => {
+			const { fixture, run } = await createDevFixture({
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+			await run(async () => {
 				const res = await fixture.fetch('/preload');
 				const html = await res.text();
-				assert.equal(html.includes('<link rel="preload"'), true);
+				const $ = cheerio.load(html);
+				const href = $('link[rel=preload][type=font/woff2]').attr('href');
+				assert.equal(href?.startsWith('/_astro/fonts/'), true);
 			});
+		});
 
-			it('Has correct headers in dev', async () => {
-				let res = await fixture.fetch('/preload');
+		it('Has correct headers in dev', async () => {
+			const { fixture, run } = await createDevFixture({
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+
+			await run(async () => {
+				const res = await fixture.fetch('/preload');
 				const html = await res.text();
 				const $ = cheerio.load(html);
 				const href = $('link[rel=preload][type^=font/woff2]').attr('href');
@@ -91,4 +125,42 @@ describe('astro:fonts', () => {
 			});
 		});
 	});
+
+	describe('build', () => {
+		it('Includes styles', async () => {
+			const { fixture } = await createBuildFixture({
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+			assert.equal(html.includes('<style>'), true);
+			assert.equal($('link[rel=preload][type=font/woff2]').attr('href'), undefined);
+		});
+
+		it('Includes links when preloading', async () => {
+			const { fixture } = await createBuildFixture({
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+			const html = await fixture.readFile('/preload/index.html');
+			const $ = cheerio.load(html);
+			const href = $('link[rel=preload][type=font/woff2]').attr('href');
+			assert.equal(href?.startsWith('/_astro/fonts/'), true);
+		});
+	});
 });

From 00d18cecb4d2c4673cbf271a84ff17881edc2d04 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 11:21:37 +0200
Subject: [PATCH 4/8] feat: better abstraction

---
 .../astro/src/assets/fonts/definitions.ts     |  4 +++
 .../assets/fonts/implementations/url-proxy.ts | 14 +++++++---
 .../fonts/implementations/url-resolver.ts     | 27 +++++++++++++++++++
 .../src/assets/fonts/vite-plugin-fonts.ts     | 23 +++++++++-------
 packages/astro/test/fonts.test.js             |  2 +-
 5 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 packages/astro/src/assets/fonts/implementations/url-resolver.ts

diff --git a/packages/astro/src/assets/fonts/definitions.ts b/packages/astro/src/assets/fonts/definitions.ts
index 52ad80aa09b8..4c3b840c5d69 100644
--- a/packages/astro/src/assets/fonts/definitions.ts
+++ b/packages/astro/src/assets/fonts/definitions.ts
@@ -60,6 +60,10 @@ export interface UrlProxy {
 	) => string;
 }
 
+export interface UrlResolver {
+	resolve: (hash: string) => string;
+}
+
 export interface UrlProxyContentResolver {
 	resolve: (url: string) => string;
 }
diff --git a/packages/astro/src/assets/fonts/implementations/url-proxy.ts b/packages/astro/src/assets/fonts/implementations/url-proxy.ts
index 9c539c6f6490..d41152c6b18a 100644
--- a/packages/astro/src/assets/fonts/implementations/url-proxy.ts
+++ b/packages/astro/src/assets/fonts/implementations/url-proxy.ts
@@ -1,20 +1,26 @@
-import type { DataCollector, Hasher, UrlProxy, UrlProxyContentResolver } from '../definitions.js';
+import type {
+	DataCollector,
+	Hasher,
+	UrlProxy,
+	UrlProxyContentResolver,
+	UrlResolver,
+} from '../definitions.js';
 
 export function createUrlProxy({
 	contentResolver,
 	hasher,
 	dataCollector,
-	getUrl,
+	urlResolver,
 }: {
 	contentResolver: UrlProxyContentResolver;
 	hasher: Hasher;
 	dataCollector: DataCollector;
-	getUrl: (hash: string) => string;
+	urlResolver: UrlResolver;
 }): UrlProxy {
 	return {
 		proxy({ url: originalUrl, type, data, collectPreload, init }) {
 			const hash = `${hasher.hashString(contentResolver.resolve(originalUrl))}.${type}`;
-			const url = getUrl(hash);
+			const url = urlResolver.resolve(hash);
 
 			dataCollector.collect({
 				url: originalUrl,
diff --git a/packages/astro/src/assets/fonts/implementations/url-resolver.ts b/packages/astro/src/assets/fonts/implementations/url-resolver.ts
new file mode 100644
index 000000000000..550894663ff0
--- /dev/null
+++ b/packages/astro/src/assets/fonts/implementations/url-resolver.ts
@@ -0,0 +1,27 @@
+import type { UrlResolver } from '../definitions.js';
+import { joinPaths, prependForwardSlash } from '../../../core/path.js';
+import type { AssetsPrefix } from '../../../types/public/index.js';
+import { getAssetsPrefix } from '../../utils/getAssetsPrefix.js';
+
+export function createDevUrlResolver({ base }: { base: string }): UrlResolver {
+	return {
+		resolve(hash) {
+			return prependForwardSlash(joinPaths(base, hash));
+		},
+	};
+}
+
+export function createBuildUrlResolver({
+	base,
+	assetsPrefix,
+}: { base: string; assetsPrefix: AssetsPrefix }): UrlResolver {
+	return {
+		resolve(hash) {
+			const prefix = assetsPrefix ? getAssetsPrefix(hash, assetsPrefix) : undefined;
+			if (prefix) {
+				return joinPaths(prefix, base, hash);
+			}
+			return prependForwardSlash(joinPaths(base, hash));
+		},
+	};
+}
diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
index 37db0254eccf..1b0f02043785 100644
--- a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
+++ b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -21,6 +21,7 @@ import type {
 	FontFetcher,
 	FontTypeExtractor,
 	RemoteFontProviderModResolver,
+	UrlResolver,
 } from './definitions.js';
 import { createMinifiableCssRenderer } from './implementations/css-renderer.js';
 import { createDataCollector } from './implementations/data-collector.js';
@@ -46,7 +47,10 @@ import { createUrlProxy } from './implementations/url-proxy.js';
 import { orchestrate } from './orchestrate.js';
 import type { ConsumableMap, FontFileDataMap } from './types.js';
 import { joinPaths, prependForwardSlash } from '../../core/path.js';
-import { getAssetsPrefix } from '../utils/getAssetsPrefix.js';
+import {
+	createBuildUrlResolver,
+	createDevUrlResolver,
+} from './implementations/url-resolver.js';
 
 interface Options {
 	settings: AstroSettings;
@@ -98,10 +102,12 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 		cacheDir,
 		modResolver,
 		cssRenderer,
+		urlResolver,
 	}: {
 		cacheDir: URL;
 		modResolver: RemoteFontProviderModResolver;
 		cssRenderer: CssRenderer;
+		urlResolver: UrlResolver;
 	}) {
 		const { root } = settings.config;
 		// Dependencies. Once extracted to a dedicated vite plugin, those may be passed as
@@ -155,15 +161,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 					? createLocalUrlProxyContentResolver({ errorHandler })
 					: createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					getUrl: (hash) => {
-						const prefix = settings.config.build.assetsPrefix
-							? getAssetsPrefix(hash, settings.config.build.assetsPrefix)
-							: undefined;
-						if (prefix) {
-							return joinPaths(prefix, baseUrl, hash);
-						}
-						return prependForwardSlash(joinPaths(baseUrl, hash));
-					},
+					urlResolver,
 					contentResolver,
 					hasher,
 					dataCollector,
@@ -188,6 +186,10 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 					cacheDir: new URL(CACHE_DIR, settings.config.cacheDir),
 					modResolver: createBuildRemoteFontProviderModResolver(),
 					cssRenderer: createMinifiableCssRenderer({ minify: true }),
+					urlResolver: createBuildUrlResolver({
+						base: baseUrl,
+						assetsPrefix: settings.config.build.assetsPrefix,
+					}),
 				});
 			}
 		},
@@ -197,6 +199,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 				cacheDir: new URL(CACHE_DIR, settings.dotAstroDir),
 				modResolver: createDevServerRemoteFontProviderModResolver({ server }),
 				cssRenderer: createMinifiableCssRenderer({ minify: false }),
+				urlResolver: createDevUrlResolver({ base: baseUrl }),
 			});
 			// The map is always defined at this point. Its values contains urls from remote providers
 			// as well as local paths for the local provider. We filter them to only keep the filepaths
diff --git a/packages/astro/test/fonts.test.js b/packages/astro/test/fonts.test.js
index a9d0c1694fc6..35be0e9c6fcd 100644
--- a/packages/astro/test/fonts.test.js
+++ b/packages/astro/test/fonts.test.js
@@ -40,7 +40,7 @@ async function createBuildFixture(inlineConfig) {
 TODO: clean up
 dev
 - respects build.assets
-- respects build.assetsPrefix
+- build.assetsPrefix is not taken into account
 build
 - respects build.assets
 - respects build.assetsPrefix

From bdf354ef37dd4f6d0f5417dfb8a11653547f3cf1 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 11:42:27 +0200
Subject: [PATCH 5/8] feat: work on unit tests

---
 .../fonts/implementations/url-resolver.ts     |  4 +-
 .../src/assets/fonts/vite-plugin-fonts.ts     | 76 +++++++++----------
 .../assets/fonts/implementations.test.js      | 50 ++++++++++++
 .../units/assets/fonts/orchestrate.test.js    |  7 +-
 4 files changed, 95 insertions(+), 42 deletions(-)

diff --git a/packages/astro/src/assets/fonts/implementations/url-resolver.ts b/packages/astro/src/assets/fonts/implementations/url-resolver.ts
index 550894663ff0..288f05b8802a 100644
--- a/packages/astro/src/assets/fonts/implementations/url-resolver.ts
+++ b/packages/astro/src/assets/fonts/implementations/url-resolver.ts
@@ -1,5 +1,5 @@
 import type { UrlResolver } from '../definitions.js';
-import { joinPaths, prependForwardSlash } from '../../../core/path.js';
+import { fileExtension, joinPaths, prependForwardSlash } from '../../../core/path.js';
 import type { AssetsPrefix } from '../../../types/public/index.js';
 import { getAssetsPrefix } from '../../utils/getAssetsPrefix.js';
 
@@ -17,7 +17,7 @@ export function createBuildUrlResolver({
 }: { base: string; assetsPrefix: AssetsPrefix }): UrlResolver {
 	return {
 		resolve(hash) {
-			const prefix = assetsPrefix ? getAssetsPrefix(hash, assetsPrefix) : undefined;
+			const prefix = assetsPrefix ? getAssetsPrefix(fileExtension(hash), assetsPrefix) : undefined;
 			if (prefix) {
 				return joinPaths(prefix, base, hash);
 			}
diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
index 1b0f02043785..1d3031c5441d 100644
--- a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
+++ b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -46,11 +46,8 @@ import {
 import { createUrlProxy } from './implementations/url-proxy.js';
 import { orchestrate } from './orchestrate.js';
 import type { ConsumableMap, FontFileDataMap } from './types.js';
-import { joinPaths, prependForwardSlash } from '../../core/path.js';
-import {
-	createBuildUrlResolver,
-	createDevUrlResolver,
-} from './implementations/url-resolver.js';
+import { appendForwardSlash, joinPaths, prependForwardSlash } from '../../core/path.js';
+import { createBuildUrlResolver, createDevUrlResolver } from './implementations/url-resolver.js';
 
 interface Options {
 	settings: AstroSettings;
@@ -222,43 +219,46 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 				}
 			});
 
-			server.middlewares.use(prependForwardSlash(assetsDir), async (req, res, next) => {
-				if (!req.url) {
-					return next();
-				}
-				const hash = req.url.slice(1);
-				const associatedData = fontFileDataMap?.get(hash);
-				if (!associatedData) {
-					return next();
-				}
-				// We don't want the request to be cached in dev because we cache it already internally,
-				// and it makes it easier to debug without needing hard refreshes
-				res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
-				res.setHeader('Pragma', 'no-cache');
-				res.setHeader('Expires', 0);
+			server.middlewares.use(
+				prependForwardSlash(appendForwardSlash(assetsDir)),
+				async (req, res, next) => {
+					if (!req.url) {
+						return next();
+					}
+					const hash = req.url.slice(1);
+					const associatedData = fontFileDataMap?.get(hash);
+					if (!associatedData) {
+						return next();
+					}
+					// We don't want the request to be cached in dev because we cache it already internally,
+					// and it makes it easier to debug without needing hard refreshes
+					res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
+					res.setHeader('Pragma', 'no-cache');
+					res.setHeader('Expires', 0);
 
-				try {
-					// Storage should be defined at this point since initialize it called before registering
-					// the middleware. hashToUrlMap is defined at the same time so if it's not set by now,
-					// no url will be matched and this line will not be reached.
-					const data = await fontFetcher!.fetch({ hash, ...associatedData });
+					try {
+						// Storage should be defined at this point since initialize it called before registering
+						// the middleware. hashToUrlMap is defined at the same time so if it's not set by now,
+						// no url will be matched and this line will not be reached.
+						const data = await fontFetcher!.fetch({ hash, ...associatedData });
 
-					res.setHeader('Content-Length', data.length);
-					res.setHeader('Content-Type', `font/${fontTypeExtractor!.extract(hash)}`);
+						res.setHeader('Content-Length', data.length);
+						res.setHeader('Content-Type', `font/${fontTypeExtractor!.extract(hash)}`);
 
-					res.end(data);
-				} catch (err) {
-					logger.error('assets', 'Cannot download font file');
-					if (isAstroError(err)) {
-						logger.error(
-							'SKIP_FORMAT',
-							formatErrorMessage(collectErrorMetadata(err), logger.level() === 'debug'),
-						);
+						res.end(data);
+					} catch (err) {
+						logger.error('assets', 'Cannot download font file');
+						if (isAstroError(err)) {
+							logger.error(
+								'SKIP_FORMAT',
+								formatErrorMessage(collectErrorMetadata(err), logger.level() === 'debug'),
+							);
+						}
+						res.statusCode = 500;
+						res.end();
 					}
-					res.statusCode = 500;
-					res.end();
-				}
-			});
+				},
+			);
 		},
 		resolveId(id) {
 			if (id === VIRTUAL_MODULE_ID) {
diff --git a/packages/astro/test/units/assets/fonts/implementations.test.js b/packages/astro/test/units/assets/fonts/implementations.test.js
index 7e83794bc9d4..e9aebbceef31 100644
--- a/packages/astro/test/units/assets/fonts/implementations.test.js
+++ b/packages/astro/test/units/assets/fonts/implementations.test.js
@@ -13,6 +13,10 @@ import { createAstroErrorHandler } from '../../../../dist/assets/fonts/implement
 import { createCachedFontFetcher } from '../../../../dist/assets/fonts/implementations/font-fetcher.js';
 import { createCapsizeFontMetricsResolver } from '../../../../dist/assets/fonts/implementations/font-metrics-resolver.js';
 import { createFontTypeExtractor } from '../../../../dist/assets/fonts/implementations/font-type-extractor.js';
+import {
+	createBuildUrlResolver,
+	createDevUrlResolver,
+} from '../../../../dist/assets/fonts/implementations/url-resolver.js';
 import { createSpyStorage, simpleErrorHandler } from './utils.js';
 
 describe('fonts implementations', () => {
@@ -343,4 +347,50 @@ describe('fonts implementations', () => {
 			}
 		}
 	});
+
+	it('createDevUrlResolver()', () => {
+		assert.equal(
+			createDevUrlResolver({ base: 'base/_astro/fonts' }).resolve('xxx.woff2'),
+			'/base/_astro/fonts/xxx.woff2',
+		);
+	});
+
+	describe('createBuildUrlResolver()', () => {
+		const base = 'foo/_custom/fonts';
+
+		it('works with no assetsPrefix', () => {
+			assert.equal(
+				createBuildUrlResolver({ base, assetsPrefix: undefined }).resolve('abc.ttf'),
+				'/foo/_custom/fonts/abc.ttf',
+			);
+		});
+
+		it('works with assetsPrefix as string', () => {
+			assert.equal(
+				createBuildUrlResolver({ base, assetsPrefix: 'https://cdn.example.com' }).resolve(
+					'foo.woff',
+				),
+				'https://cdn.example.com/foo/_custom/fonts/foo.woff',
+			);
+		});
+
+		it('works with assetsPrefix object', () => {
+			const resolver = createBuildUrlResolver({
+				base,
+				assetsPrefix: {
+					woff2: 'https://fonts.cdn.example.com',
+					fallback: 'https://cdn.example.com',
+				},
+			});
+
+			assert.equal(
+				resolver.resolve('bar.woff2'),
+				'https://fonts.cdn.example.com/foo/_custom/fonts/bar.woff2',
+			);
+			assert.equal(
+				resolver.resolve('xyz.ttf'),
+				'https://cdn.example.com/foo/_custom/fonts/xyz.ttf',
+			);
+		});
+	});
 });
diff --git a/packages/astro/test/units/assets/fonts/orchestrate.test.js b/packages/astro/test/units/assets/fonts/orchestrate.test.js
index 07018f3bb7e4..0280d1f7814b 100644
--- a/packages/astro/test/units/assets/fonts/orchestrate.test.js
+++ b/packages/astro/test/units/assets/fonts/orchestrate.test.js
@@ -23,6 +23,7 @@ import {
 	simpleErrorHandler,
 } from './utils.js';
 import { defaultLogger } from '../../test-utils.js';
+import { createDevUrlResolver } from '../../../../dist/assets/fonts/implementations/url-resolver.js';
 
 describe('fonts orchestrate()', () => {
 	it('works with local fonts', async () => {
@@ -64,7 +65,7 @@ describe('fonts orchestrate()', () => {
 				const dataCollector = createDataCollector(params);
 				const contentResolver = createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					getUrl: (hash) => `/test${hash}`,
+					urlResolver: createDevUrlResolver({ base: 'test' }),
 					contentResolver,
 					hasher,
 					dataCollector,
@@ -165,7 +166,9 @@ describe('fonts orchestrate()', () => {
 				const dataCollector = createDataCollector(params);
 				const contentResolver = createRemoteUrlProxyContentResolver();
 				return createUrlProxy({
-					getUrl: (hash) => hash,
+					urlResolver: {
+						resolve: (hash) => hash,
+					},
 					contentResolver,
 					hasher,
 					dataCollector,

From ab5b96614b42b98db68135f489658c3400290e7a Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 12:00:42 +0200
Subject: [PATCH 6/8] feat: fixture test

---
 .../src/assets/fonts/vite-plugin-fonts.ts     | 75 +++++++++----------
 packages/astro/test/fonts.test.js             | 62 ++++++++++++---
 2 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
index 1d3031c5441d..e59228a8cc8a 100644
--- a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
+++ b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -80,7 +80,9 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 	// We don't need to take the trailing slash and build output configuration options
 	// into account because we only serve (dev) or write (build) static assets (equivalent
 	// to trailingSlash: never)
-	const assetsDir = joinPaths(settings.config.build.assets, ASSETS_DIR);
+	const assetsDir = prependForwardSlash(
+		appendForwardSlash(joinPaths(settings.config.build.assets, ASSETS_DIR)),
+	);
 	const baseUrl = joinPaths(settings.config.base, assetsDir);
 
 	let fontFileDataMap: FontFileDataMap | null = null;
@@ -219,46 +221,43 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 				}
 			});
 
-			server.middlewares.use(
-				prependForwardSlash(appendForwardSlash(assetsDir)),
-				async (req, res, next) => {
-					if (!req.url) {
-						return next();
-					}
-					const hash = req.url.slice(1);
-					const associatedData = fontFileDataMap?.get(hash);
-					if (!associatedData) {
-						return next();
-					}
-					// We don't want the request to be cached in dev because we cache it already internally,
-					// and it makes it easier to debug without needing hard refreshes
-					res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
-					res.setHeader('Pragma', 'no-cache');
-					res.setHeader('Expires', 0);
+			server.middlewares.use(assetsDir, async (req, res, next) => {
+				if (!req.url) {
+					return next();
+				}
+				const hash = req.url.slice(1);
+				const associatedData = fontFileDataMap?.get(hash);
+				if (!associatedData) {
+					return next();
+				}
+				// We don't want the request to be cached in dev because we cache it already internally,
+				// and it makes it easier to debug without needing hard refreshes
+				res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
+				res.setHeader('Pragma', 'no-cache');
+				res.setHeader('Expires', 0);
 
-					try {
-						// Storage should be defined at this point since initialize it called before registering
-						// the middleware. hashToUrlMap is defined at the same time so if it's not set by now,
-						// no url will be matched and this line will not be reached.
-						const data = await fontFetcher!.fetch({ hash, ...associatedData });
+				try {
+					// Storage should be defined at this point since initialize it called before registering
+					// the middleware. hashToUrlMap is defined at the same time so if it's not set by now,
+					// no url will be matched and this line will not be reached.
+					const data = await fontFetcher!.fetch({ hash, ...associatedData });
 
-						res.setHeader('Content-Length', data.length);
-						res.setHeader('Content-Type', `font/${fontTypeExtractor!.extract(hash)}`);
+					res.setHeader('Content-Length', data.length);
+					res.setHeader('Content-Type', `font/${fontTypeExtractor!.extract(hash)}`);
 
-						res.end(data);
-					} catch (err) {
-						logger.error('assets', 'Cannot download font file');
-						if (isAstroError(err)) {
-							logger.error(
-								'SKIP_FORMAT',
-								formatErrorMessage(collectErrorMetadata(err), logger.level() === 'debug'),
-							);
-						}
-						res.statusCode = 500;
-						res.end();
+					res.end(data);
+				} catch (err) {
+					logger.error('assets', 'Cannot download font file');
+					if (isAstroError(err)) {
+						logger.error(
+							'SKIP_FORMAT',
+							formatErrorMessage(collectErrorMetadata(err), logger.level() === 'debug'),
+						);
 					}
-				},
-			);
+					res.statusCode = 500;
+					res.end();
+				}
+			});
 		},
 		resolveId(id) {
 			if (id === VIRTUAL_MODULE_ID) {
@@ -280,7 +279,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 
 			try {
 				const dir = getClientOutputDirectory(settings);
-				const fontsDir = new URL(`.${prependForwardSlash(baseUrl)}`, dir);
+				const fontsDir = new URL(`.${assetsDir}`, dir);
 				try {
 					mkdirSync(fontsDir, { recursive: true });
 				} catch (cause) {
diff --git a/packages/astro/test/fonts.test.js b/packages/astro/test/fonts.test.js
index 35be0e9c6fcd..bb8fdb53b1f3 100644
--- a/packages/astro/test/fonts.test.js
+++ b/packages/astro/test/fonts.test.js
@@ -4,6 +4,7 @@ import { describe, it } from 'node:test';
 import { fontProviders } from 'astro/config';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
+import { readdir } from 'node:fs/promises';
 
 /**
  * @param {Omit<import("./test-utils.js").AstroInlineConfig, 'root'>} inlineConfig
@@ -36,16 +37,6 @@ async function createBuildFixture(inlineConfig) {
 	};
 }
 
-/*
-TODO: clean up
-dev
-- respects build.assets
-- build.assetsPrefix is not taken into account
-build
-- respects build.assets
-- respects build.assetsPrefix
-*/
-
 describe('astro fonts', () => {
 	describe('dev', () => {
 		it('Includes styles', async () => {
@@ -124,6 +115,32 @@ describe('astro fonts', () => {
 				assert.equal(headers.get('Expires'), '0');
 			});
 		});
+
+		it('Respects config to build links', async () => {
+			const { fixture, run } = await createDevFixture({
+				base: '/my-base',
+				build: {
+					assets: '_custom',
+					assetsPrefix: 'https//cdn.example.com',
+				},
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+			await run(async () => {
+				const res = await fixture.fetch('/my-base/preload');
+				const html = await res.text();
+				const $ = cheerio.load(html);
+				const href = $('link[rel=preload][type=font/woff2]').attr('href');
+				assert.equal(href?.startsWith('/my-base/_custom/fonts/'), true);
+			});
+		});
 	});
 
 	describe('build', () => {
@@ -162,5 +179,30 @@ describe('astro fonts', () => {
 			const href = $('link[rel=preload][type=font/woff2]').attr('href');
 			assert.equal(href?.startsWith('/_astro/fonts/'), true);
 		});
+
+		it('Respects config to build links', async () => {
+			const { fixture } = await createBuildFixture({
+				base: '/my-base',
+				build: {
+					assets: '_custom',
+					assetsPrefix: 'https://cdn.example.com',
+				},
+				experimental: {
+					fonts: [
+						{
+							name: 'Roboto',
+							cssVariable: '--font-roboto',
+							provider: fontProviders.fontsource(),
+						},
+					],
+				},
+			});
+			const html = await fixture.readFile('/preload/index.html');
+			const $ = cheerio.load(html);
+			const href = $('link[rel=preload][type=font/woff2]').attr('href');
+			assert.equal(href?.startsWith('https://cdn.example.com/my-base/_custom/fonts/'), true);
+			const files = await readdir(new URL('./dist/_custom/fonts/', fixture.config.root));
+			assert.equal(files.length > 0, true);
+		});
 	});
 });

From 3133ad77374ff4bebb808b688e2256c9e8a9d374 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 12:05:30 +0200
Subject: [PATCH 7/8] chore: changeset

---
 .changeset/soft-memes-sin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/soft-memes-sin.md

diff --git a/.changeset/soft-memes-sin.md b/.changeset/soft-memes-sin.md
new file mode 100644
index 000000000000..3af8a74f496a
--- /dev/null
+++ b/.changeset/soft-memes-sin.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes the experimental fonts API to correctly take `config.base`, `config.build.assets` and `config.build.assetsPrefix` into account

From aa4db65ea7a0b0deb29a6916d316a63e19f9038b Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 12 May 2025 13:35:21 +0200
Subject: [PATCH 8/8] chore: update comment

---
 packages/astro/src/assets/fonts/vite-plugin-fonts.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
index e59228a8cc8a..2e076c0de50e 100644
--- a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
+++ b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -77,9 +77,8 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 		};
 	}
 
-	// We don't need to take the trailing slash and build output configuration options
-	// into account because we only serve (dev) or write (build) static assets (equivalent
-	// to trailingSlash: never)
+	// We don't need to worry about config.trailingSlash because we are dealing with
+	// static assets only, ie. trailingSlash: 'never'
 	const assetsDir = prependForwardSlash(
 		appendForwardSlash(joinPaths(settings.config.build.assets, ASSETS_DIR)),
 	);