fix(fonts): invalid dev url with oblique style and angles (#16075)

florian-lefebvre · web-flow · commit 2c1ae859d915 · 2026-03-25T11:30:15.000+01:00
diff --git a/.changeset/tired-worlds-dream.md b/.changeset/tired-worlds-dream.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a case where invalid URLs would be generated in development when using font families with an oblique `style` and angles
diff --git a/packages/astro/src/assets/fonts/infra/dev-font-file-id-generator.ts b/packages/astro/src/assets/fonts/infra/dev-font-file-id-generator.ts
@@ -27,6 +27,10 @@ export class DevFontFileIdGenerator implements FontFileIdGenerator {
 		return weight?.replace(/\s+/g, '-');
 	}
 
+	#formatStyle(style: unifont.FontFaceData['style']): string | undefined {
+		return style?.replace(/\s+/g, '-')
+	}
+
 	generate({
 		cssVariable,
 		originalUrl,
@@ -41,7 +45,7 @@ export class DevFontFileIdGenerator implements FontFileIdGenerator {
 		return [
 			cssVariable.slice(2),
 			this.#formatWeight(font.weight),
-			font.style,
+			this.#formatStyle(font.style),
 			font.meta?.subset,
 			`${this.#hasher.hashString(this.#contentResolver.resolve(originalUrl))}.${type}`,
 		]
diff --git a/packages/astro/test/units/assets/fonts/infra.test.js b/packages/astro/test/units/assets/fonts/infra.test.js
@@ -409,6 +409,15 @@ describe('fonts infra', () => {
 			}),
 			'foo-200-700-italic-cyrillic-whatever.woff2',
 		);
+		assert.equal(
+			resolver.generate({
+				cssVariable: '--foo',
+				font: { weight: '500', style: 'oblique 0deg 15deg', meta: { subset: 'latin' }, src: [] },
+				originalUrl: 'whatever',
+				type: 'woff2',
+			}),
+			'foo-500-oblique-0deg-15deg-latin-whatever.woff2',
+		);
 	});
 
 	describe('UnifontFontResolver', () => {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes a case where invalid URLs would be generated in development when using font families with an oblique `style` and angles