fix(font): type to format mapping

.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

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 = {

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,
 				};
 			}),

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;
 			}

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,
 					},
 				],

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', () => {