fix(font): type to format mapping (#13643)

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

6 files changed, 34 insertions, 9 deletions

diff --git a/.changeset/moody-windows-flash.md b/.changeset/moody-windows-flash.md
new file mode 100644
index 000000000..2a09b033e
--- /dev/null
+++ b/.changeset/moody-windows-flash.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a case where the font face `src` format would be invalid when using the experimental fonts API
diff --git a/packages/astro/src/assets/fonts/constants.ts b/packages/astro/src/assets/fonts/constants.ts
index 9e22d1da4..c7831f2b3 100644
--- a/packages/astro/src/assets/fonts/constants.ts
+++ b/packages/astro/src/assets/fonts/constants.ts
@@ -20,6 +20,13 @@ export const URL_PREFIX = '/_astro/fonts/';
 export const CACHE_DIR = './fonts/';
 
 export const FONT_TYPES = ['woff2', 'woff', 'otf', 'ttf', 'eot'] as const;
+export const FONT_FORMAT_MAP: Record<(typeof FONT_TYPES)[number], string> = {
+	woff2: 'woff2',
+	woff: 'woff',
+	otf: 'opentype',
+	ttf: 'truetype',
+	eot: 'embedded-opentype',
+};
 
 // Extracted from https://raw.githubusercontent.com/seek-oss/capsize/refs/heads/master/packages/metrics/src/entireMetricsCollection.json
 export const SYSTEM_METRICS = {
diff --git a/packages/astro/src/assets/fonts/providers/local.ts b/packages/astro/src/assets/fonts/providers/local.ts
index 80f500e75..95aa5eb6f 100644
--- a/packages/astro/src/assets/fonts/providers/local.ts
+++ b/packages/astro/src/assets/fonts/providers/local.ts
@@ -1,6 +1,7 @@
 import type * as unifont from 'unifont';
 import type { ResolvedLocalFontFamily } from '../types.js';
 import { extractFontType } from '../utils.js';
+import { FONT_FORMAT_MAP } from '../constants.js';
 
 // https://fonts.nuxt.com/get-started/providers#local
 // https://github.com/nuxt/fonts/blob/main/src/providers/local.ts
@@ -26,7 +27,7 @@ export function resolveLocalFont({ family, proxyURL }: Options): ResolveFontResu
 				return {
 					originalURL,
 					url: proxyURL(originalURL),
-					format: extractFontType(originalURL),
+					format: FONT_FORMAT_MAP[extractFontType(originalURL)],
 					tech,
 				};
 			}),
diff --git a/packages/astro/src/assets/fonts/utils.ts b/packages/astro/src/assets/fonts/utils.ts
index 8768c41ae..cf230ffd3 100644
--- a/packages/astro/src/assets/fonts/utils.ts
+++ b/packages/astro/src/assets/fonts/utils.ts
@@ -46,11 +46,11 @@ export function renderFontSrc(sources: Exclude<unifont.FontFaceData['src'][numbe
 		.map((src) => {
 			if ('url' in src) {
 				let rendered = `url("${src.url}")`;
-				for (const key of ['format', 'tech'] as const) {
-					const value = src[key];
-					if (value) {
-						rendered += ` ${key}(${value})`;
-					}
+				if (src.format) {
+					rendered += ` format("${src.format}")`
+				}
+				if (src.tech) {
+					rendered += ` tech(${src.tech})`
 				}
 				return rendered;
 			}
diff --git a/packages/astro/test/units/assets/fonts/providers.test.js b/packages/astro/test/units/assets/fonts/providers.test.js
index 18c5945eb..7ae267125 100644
--- a/packages/astro/test/units/assets/fonts/providers.test.js
+++ b/packages/astro/test/units/assets/fonts/providers.test.js
@@ -115,7 +115,7 @@ describe('fonts providers', () => {
 					{
 						originalURL: '/src/fonts/foo.ttf',
 						url: '/_astro/fonts/foo.ttf',
-						format: 'ttf',
+						format: 'truetype',
 						tech: undefined,
 					},
 				],
@@ -153,7 +153,7 @@ describe('fonts providers', () => {
 					{
 						originalURL: '/src/fonts/bar.eot',
 						url: '/_astro/fonts/bar.eot',
-						format: 'eot',
+						format: 'embedded-opentype',
 						tech: 'color-SVG',
 					},
 				],
@@ -166,7 +166,7 @@ describe('fonts providers', () => {
 					{
 						originalURL: '/src/fonts/bar.eot',
 						url: '/_astro/fonts/bar.eot',
-						format: 'eot',
+						format: 'embedded-opentype',
 						tech: undefined,
 					},
 				],
diff --git a/packages/astro/test/units/assets/fonts/utils.test.js b/packages/astro/test/units/assets/fonts/utils.test.js
index a3a12c27c..1a4eb1a09 100644
--- a/packages/astro/test/units/assets/fonts/utils.test.js
+++ b/packages/astro/test/units/assets/fonts/utils.test.js
@@ -550,6 +550,18 @@ describe('fonts utils', () => {
 				false,
 			);
 		});
+		it('wraps format in quotes', () => {
+			assert.equal(
+				renderFontSrc([{ url: 'test', format: 'woff2' }]).includes('format("woff2")'),
+				true,
+			);
+		});
+		it('does not wrap tech in quotes', () => {
+			assert.equal(
+				renderFontSrc([{ url: 'test', tech: 'x' }]).includes('tech(x)'),
+				true,
+			);
+		});
 	});
 
 	it('toCSS', () => {