fix(fontless): render valid format() values in @font-face src

`parseFont` always sets the `format` key, so `key in src` stayed true
even when `formatMap` had no entry for the extension, rendering the
literal `format(undefined)` for cache-busted and extensionless URLs.

Non-keyword values were also emitted unquoted. Per css-fonts-4 only the
seven defined `<font-format>` keywords may appear bare — anything else,
such as the legacy `woff2-variations` that unifont unquotes when parsing
provider CSS, has to be a string.

Both are silent font failures in Safari, which drops the whole `src`
descriptor rather than just the offending component.

`tech()` is now guarded on its value too, but stays unquoted —
`<font-tech>` accepts keywords only, with no string alternative.

Fixes #772

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Togetic

packages/fontless/src/css/render.ts

@@ -67,14 +67,21 @@ export function parseFont(font: string): RemoteFontSource | { name: string } {
   return { name: font }
 }
 
+// https://drafts.csswg.org/css-fonts-4/#font-format-values
+const fontFormatKeywords = new Set(['collection', 'embedded-opentype', 'opentype', 'svg', 'truetype', 'woff', 'woff2'])
+
 function renderFontSrc(sources: Exclude<FontSource, string>[]) {
   return sources.map((src) => {
     if ('url' in src) {
       let rendered = `url("${src.url}")`
-      for (const key of ['format', 'tech'] as const) {
-        if (key in src) {
-          rendered += ` ${key}(${src[key]})`
-        }
+      // `format()` takes a `<font-format>` keyword, or a string for values outside
+      // that set (such as the legacy `woff2-variations`).
+      if (src.format) {
+        rendered += ` format(${fontFormatKeywords.has(src.format) ? src.format : `"${src.format}"`})`
+      }
+      // `tech()` takes `<font-tech>` keywords only — never a string.
+      if (src.tech) {
+        rendered += ` tech(${src.tech})`
       }
       return rendered
     }

packages/fontless/test/render.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { generateFontFace } from '../src/css/render'
+import { generateFontFace, parseFont } from '../src/css/render'
 
 describe('rendering @font-face', () => {
   it('should add declarations for `font-family`', () => {
@@ -36,4 +36,42 @@ describe('rendering @font-face', () => {
       }"
     `)
   })
+  it('should omit `format()` when the format is unknown', () => {
+    // `parseFont` leaves `format` undefined when the extension is not recognised,
+    // which covers cache-busted and extensionless provider URLs
+    const css = generateFontFace('Inter', {
+      src: [parseFont('/inter.woff2?v=3.19') as never, parseFont('https://fonts.example.com/l/font?kit=abc') as never],
+    })
+    expect(css).toMatchInlineSnapshot(`
+      "@font-face {
+        font-family: 'Inter';
+        src: url("/inter.woff2?v=3.19"), url("https://fonts.example.com/l/font?kit=abc");
+        font-display: swap;
+      }"
+    `)
+  })
+  it('should quote `format()` values that are not keywords', () => {
+    const css = generateFontFace('Inter', {
+      src: [{ url: '/inter.woff2', format: 'woff2-variations' }],
+    })
+    expect(css).toMatchInlineSnapshot(`
+      "@font-face {
+        font-family: 'Inter';
+        src: url("/inter.woff2") format("woff2-variations");
+        font-display: swap;
+      }"
+    `)
+  })
+  it('should render `tech()` as an unquoted keyword', () => {
+    const css = generateFontFace('Trickster', {
+      src: [{ url: '/trickster.otf', format: 'opentype', tech: 'color-COLRv1' }],
+    })
+    expect(css).toMatchInlineSnapshot(`
+      "@font-face {
+        font-family: 'Trickster';
+        src: url("/trickster.otf") format(opentype) tech(color-COLRv1);
+        font-display: swap;
+      }"
+    `)
+  })
 })