diff --git a/.changeset/lemon-monkeys-peel.md b/.changeset/lemon-monkeys-peel.md
new file mode 100644
index 000000000000..c54e45843e34
--- /dev/null
+++ b/.changeset/lemon-monkeys-peel.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+---
+
+Fixes optimized fallback css generation to properly add a `src` when using the experimental fonts API
+
diff --git a/packages/astro/src/assets/fonts/implementations/font-metrics-resolver.ts b/packages/astro/src/assets/fonts/implementations/font-metrics-resolver.ts
index 5dff86d0939c..2fe3baa442fb 100644
--- a/packages/astro/src/assets/fonts/implementations/font-metrics-resolver.ts
+++ b/packages/astro/src/assets/fonts/implementations/font-metrics-resolver.ts
@@ -61,12 +61,12 @@ export function createCapsizeFontMetricsResolver({
 			const lineGapOverride = metrics.lineGap / adjustedEmSquare;
 
 			return cssRenderer.generateFontFace(fallbackName, {
+				...properties,
 				src: renderFontSrc([{ name: fallbackFontName }]),
 				'size-adjust': toPercentage(sizeAdjust),
 				'ascent-override': toPercentage(ascentOverride),
 				'descent-override': toPercentage(descentOverride),
 				'line-gap-override': toPercentage(lineGapOverride),
-				...properties,
 			});
 		},
 	};
diff --git a/packages/astro/test/units/assets/fonts/implementations.test.js b/packages/astro/test/units/assets/fonts/implementations.test.js
index 1370f730e849..32d6d144f683 100644
--- a/packages/astro/test/units/assets/fonts/implementations.test.js
+++ b/packages/astro/test/units/assets/fonts/implementations.test.js
@@ -11,6 +11,8 @@ import { createDataCollector } from '../../../../dist/assets/fonts/implementatio
 import { createAstroErrorHandler } from '../../../../dist/assets/fonts/implementations/error-handler.js';
 import { createCachedFontFetcher } from '../../../../dist/assets/fonts/implementations/font-fetcher.js';
 import { createFontTypeExtractor } from '../../../../dist/assets/fonts/implementations/font-type-extractor.js';
+import { createCapsizeFontMetricsResolver } from '../../../../dist/assets/fonts/implementations/font-metrics-resolver.js';
+import { createMinifiableCssRenderer } from '../../../../dist/assets/fonts/implementations/css-renderer.js';
 import { createSpyStorage, simpleErrorHandler } from './utils.js';
 
 describe('fonts implementations', () => {
@@ -269,8 +271,44 @@ describe('fonts implementations', () => {
 		});
 	});
 
-	// TODO: find a good way to test this
-	// describe('createCapsizeFontMetricsResolver()', () => {});
+	describe('createCapsizeFontMetricsResolver()', () => {
+		describe('generateFontFace()', () => {
+			it('returns a src', () => {
+				const fontMetricsResolver = createCapsizeFontMetricsResolver({
+					cssRenderer: createMinifiableCssRenderer({ minify: true }),
+					fontFetcher: {
+						async fetch() {
+							return Buffer.from('');
+						},
+					},
+				});
+
+				const css = fontMetricsResolver.generateFontFace({
+					name: 'Roboto-xxx fallback: Arial',
+					font: 'Arial',
+					metrics: {
+						ascent: 1,
+						descent: 1,
+						lineGap: 1,
+						unitsPerEm: 1,
+						xWidthAvg: 1,
+					},
+					fallbackMetrics: {
+						ascent: 1,
+						descent: 1,
+						lineGap: 1,
+						unitsPerEm: 1,
+						xWidthAvg: 1,
+					},
+					properties: {
+						src: undefined
+					}
+				});
+
+				assert.equal(css.includes('src:local("Arial")'), true)
+			});
+		});
+	});
 
 	it('createFontTypeExtractor()', () => {
 		/** @type {Array<[string, false | string]>} */