@@ -2,6 +2,13 @@
 
 ## 3.13.0
 
+### New
+
+- WOFF fonts work everywhere fonts do: `renderText()`, `TextLayout`, and SVG rendering's `fonts` option (before, only
+  fonts an SVG embeds with `@font-face` could be WOFF). Font packages like Fontsource ship only WOFF and WOFF2, so
+  their fonts can be used directly. WOFF2 fonts are refused with a clear error for now: they need Brotli, which
+  Chrome's `DecompressionStream` doesn't offer yet.
+
 ### Changes
 
 - PNG and APNG encoding (`encode()`, `encodePNG()`, `encodeAPNG()`, `apngEncoder()`) default to compression level 4
 
@@ -60,7 +60,7 @@ and encoded as GIF, APNG or WebP, all at once or
 [frame by frame](https://imagescript.dev/classes/Animation.html#webpencoder). Embedded color profiles (Display
 P3, Adobe RGB, ...) are converted to sRGB when decoding, so images look the way browsers show them.
 
-- [Text rendering](https://imagescript.dev/classes/Image.html#rendertext) with TrueType and OpenType fonts:
+- [Text rendering](https://imagescript.dev/classes/Image.html#rendertext) with TrueType, OpenType and WOFF fonts:
   all scripts, color emoji, variable fonts
 - [SVG rendering](https://imagescript.dev/classes/Image.html#rendersvg), including text (with fonts you pass
   or fonts embedded in the SVG)
 
@@ -180,8 +180,8 @@ export interface SVGOptions {
      * and `font-stretch` match best among them, by the names, weights and styles in the fonts (like browsers match
      * installed fonts). Generic families (`serif`, `sans-serif`, `monospace`, ...) are the first font that fits them,
      * other families and text without one get the first font's family; characters a face doesn't have come from the
-     * other fonts. Fonts the SVG embeds with `@font-face` (in data: URIs, also WOFF) are used too, before these for
-     * their family names. Without any fonts text isn't rendered. Default: `[]`
+     * other fonts (TrueType, OpenType or WOFF). Fonts the SVG embeds with `@font-face` (in data: URIs) are used too,
+     * before these for their family names. Without any fonts text isn't rendered. Default: `[]`
      */
     fonts?: BinaryData[];
 }
@@ -2411,10 +2411,11 @@ export class Image {
 
     /**
      * Creates a new image containing the rendered text.
-     * @param font TrueType (ttf/ttc) or OpenType (otf) font buffer to use, or several by priority: every character
-     *     comes from the first font that has it (e.g. `[text, emoji]`), the first one sets the line height. Color
-     *     glyphs (COLR layers and paints, CBDT and sbix bitmaps, as in emoji fonts) keep their colors. Text in any script
-     *     is shaped like browsers do (right to left and bidirectional text, Arabic joining, Indic conjuncts, marks)
+     * @param font TrueType (ttf/ttc), OpenType (otf) or WOFF font buffer to use, or several by priority: every
+     *     character comes from the first font that has it (e.g. `[text, emoji]`), the first one sets the line height.
+     *     Color glyphs (COLR layers and paints, CBDT and sbix bitmaps, as in emoji fonts) keep their colors. Text in any
+     *     script is shaped like browsers do (right to left and bidirectional text, Arabic joining, Indic conjuncts,
+     *     marks)
      * @param size Font size in pixels (per em)
      * @param text Text to render
      * @param options Color, layout and style, see {@link TextOptions}; the image grows by the outline width on every
@@ -2424,10 +2425,11 @@ export class Image {
     static renderText(font: BinaryData | BinaryData[], size: number, text: string, options?: TextOptions): Promise<Image>;
     /**
      * Creates a new image containing the rendered text.
-     * @param font TrueType (ttf/ttc) or OpenType (otf) font buffer to use, or several by priority: every character
-     *     comes from the first font that has it (e.g. `[text, emoji]`), the first one sets the line height. Color
-     *     glyphs (COLR layers and paints, CBDT and sbix bitmaps, as in emoji fonts) keep their colors. Text in any script
-     *     is shaped like browsers do (right to left and bidirectional text, Arabic joining, Indic conjuncts, marks)
+     * @param font TrueType (ttf/ttc), OpenType (otf) or WOFF font buffer to use, or several by priority: every
+     *     character comes from the first font that has it (e.g. `[text, emoji]`), the first one sets the line height.
+     *     Color glyphs (COLR layers and paints, CBDT and sbix bitmaps, as in emoji fonts) keep their colors. Text in any
+     *     script is shaped like browsers do (right to left and bidirectional text, Arabic joining, Indic conjuncts,
+     *     marks)
      * @param size Font size in pixels (per em)
      * @param text Text to render
      * @param [color=0xffffffff] Text color to use
 
@@ -1,3 +1,4 @@
+import { decompress } from '../codecs/zlib.ts';
 import { type Axis, Gvar, ItemVariationStore, cvarDeltas, deltaSetIndexMap, normalize, parseAvar, parseFvar } from './variations.ts';
 
 
@@ -77,13 +78,16 @@ export class Font {
     private instances: Map<string, Font> | null = null;
 
     constructor(data: Uint8Array) {
+        // 'wOFF': the TrueType or OpenType font it compresses; 'wOF2' (Brotli) isn't everywhere yet
+        const woff = data.length >= 4 ? (data[0] << 24 | data[1] << 16 | data[2] << 8 | data[3]) >>> 0 : 0;
+        if (woff === 0x774f4646) data = fromWOFF(data);
+        else if (woff === 0x774f4632) throw new Error('Font: WOFF2 fonts are not supported, only WOFF');
         this.data = data;
         this.view = new DataView(data.buffer, data.byteOffset, data.byteLength);
 
         let offset = 0;
         const signature = this.u32(0);
         if (signature === 0x74746366) offset = this.u32(12); // 'ttcf', use the first font
-        else if (signature === 0x774f4646 || signature === 0x774f4632) throw new Error('Font: WOFF fonts are not supported');
 
         const version = this.u32(offset);
         if (version !== 0x00010000 && version !== 0x4f54544f && version !== 0x74727565) throw new Error('Font: invalid font file');
@@ -1102,3 +1106,30 @@ function cffCharString(cff: CFF, glyph: number): PathCommand[] {
     return path;
 }
 
+// a WOFF (1) font as the TrueType or OpenType font it compresses
+function fromWOFF(data: Uint8Array): Uint8Array {
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const count = view.getUint16(12);
+    const tables: Array<{ tag: number, data: Uint8Array, checksum: number }> = [];
+    for (let i = 0; i < count; i++) {
+        const e = 44 + i * 20, offset = view.getUint32(e + 4), compressed = view.getUint32(e + 8), length = view.getUint32(e + 12);
+        const raw = data.subarray(offset, offset + compressed);
+        tables.push({ tag: view.getUint32(e), checksum: view.getUint32(e + 16), data: compressed < length ? decompress(raw, length).subarray(0, length) : raw });
+    }
+    const header = 12 + count * 16;
+    let size = header;
+    for (const t of tables) size += t.data.length + 3 & ~3;
+    const out = new Uint8Array(size), o = new DataView(out.buffer);
+    o.setUint32(0, view.getUint32(4));
+    o.setUint16(4, count);
+    let position = header;
+    tables.forEach((t, i) => {
+        o.setUint32(12 + i * 16, t.tag);
+        o.setUint32(16 + i * 16, t.checksum);
+        o.setUint32(20 + i * 16, position);
+        o.setUint32(24 + i * 16, t.data.length);
+        out.set(t.data, position);
+        position += t.data.length + 3 & ~3;
+    });
+    return out;
+}
@@ -21,7 +21,6 @@ import { FontFace, FontStyle, fontFace, layOutText, parseFontFamilies, parseVari
 import { rasterizeGlyph } from './text.ts';
 import { renderPaintGlyph } from './colr.ts';
 import { decodeSync as decodePNG } from '../codecs/png.ts';
-import { decompress } from '../codecs/zlib.ts';
 
 const UNSUPPORTED = new Set(['filter', 'pattern', 'marker', 'foreignObject', 'script', 'style', 'title', 'desc', 'metadata',
     'defs', 'clipPath', 'mask', 'linearGradient', 'radialGradient', 'stop', 'symbol', 'font', 'font-face', 'animate', 'animateTransform', 'animateMotion', 'set']);
@@ -3633,13 +3632,7 @@ function embeddedFonts(css: string): FontFace[] {
         if (family) for (const [, , url] of (d.src ?? '').matchAll(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g)) {
             const uri = dataURI(url);
             if (!uri) continue;
-            let data: Uint8Array | null = uri.data;
-            try {
-                if (data[0] === 0x77 && data[1] === 0x4f && data[2] === 0x46 && data[3] === 0x46) data = fromWOFF(data);
-            } catch {
-                data = null;
-            }
-            const face = data && fontFace(data, { family, weight, style });
+            const face = fontFace(uri.data, { family, weight, style });
             if (face) {
                 faces.push(face);
                 break;
@@ -3651,34 +3644,6 @@ function embeddedFonts(css: string): FontFace[] {
     return faces;
 }
 
-// a WOFF (1) font as the TrueType or OpenType font it compresses
-function fromWOFF(data: Uint8Array): Uint8Array {
-    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
-    const count = view.getUint16(12);
-    const tables: Array<{ tag: number, data: Uint8Array, checksum: number }> = [];
-    for (let i = 0; i < count; i++) {
-        const e = 44 + i * 20, offset = view.getUint32(e + 4), compressed = view.getUint32(e + 8), length = view.getUint32(e + 12);
-        const raw = data.subarray(offset, offset + compressed);
-        tables.push({ tag: view.getUint32(e), checksum: view.getUint32(e + 16), data: compressed < length ? decompress(raw, length).subarray(0, length) : raw });
-    }
-    const header = 12 + count * 16;
-    let size = header;
-    for (const t of tables) size += t.data.length + 3 & ~3;
-    const out = new Uint8Array(size), o = new DataView(out.buffer);
-    o.setUint32(0, view.getUint32(4));
-    o.setUint16(4, count);
-    let position = header;
-    tables.forEach((t, i) => {
-        o.setUint32(12 + i * 16, t.tag);
-        o.setUint32(16 + i * 16, t.checksum);
-        o.setUint32(20 + i * 16, position);
-        o.setUint32(24 + i * 16, t.data.length);
-        out.set(t.data, position);
-        position += t.data.length + 3 & ~3;
-    });
-    return out;
-}
-
 // an element's transform around its transform-origin
 function transformOf(style: Style, viewport: Viewport, fallback?: string): Matrix {
     return originTransform(style.transform as string, style['transform-origin'] ?? fallback, viewport, parseNumber(style['font-size'], 16));
 
@@ -4,7 +4,7 @@
  https://www.1001fonts.com/ethnocentric-font.html
  https://github.com/adobe-fonts/source-sans (SIL OFL, see OFL-SourceSans3.md)
  https://notofonts.github.io (subsets of Noto Sans Hebrew, Noto Naskh Arabic and Noto Sans Devanagari, SIL OFL, see
-   ../shaping/OFL-Noto.md)
+   ../shaping/OFL-Noto.md; noto naskh arabic subset.woff is the .ttf as WOFF, by fontTools)
  https://github.com/googlefonts/noto-emoji (subsets of Noto Color Emoji and Noto-COLRv1, SIL OFL, see OFL-NotoColorEmoji.md;
    damaged noto colrv1 subset.ttf is a damaged copy for tests/regressions.js)
  colrv1 paints.ttf is built by colrv1-paints.py, sbix.ttf by sbix.py, hinting instructions.ttf by scripts/hinting-fixtures.py
@@ -21,6 +21,20 @@ const panic = message => {
 };
 
 (async () => {
+    // WOFF fonts render like the fonts they compress; WOFF2 ones are refused with a clear message
+    {
+        const text = 'مرحبا بالعالم';
+        const ttf = await Image.renderText(await fs.readFile('./tests/fonts/noto naskh arabic subset.ttf'), 48, text);
+        const woff = await Image.renderText(await fs.readFile('./tests/fonts/noto naskh arabic subset.woff'), 48, text);
+        if (!Buffer.from(ttf.bitmap).equals(Buffer.from(woff.bitmap))) panic('WOFF font doesn\'t render like its TTF');
+
+        const woff2 = new Uint8Array(64);
+        woff2.set([0x77, 0x4f, 0x46, 0x32]);
+        await Image.renderText(woff2, 48, text).then(() => panic('WOFF2 font was accepted'), err => {
+            if (!/WOFF2/.test(err.message)) panic(`unexpected WOFF2 error: ${err.message}`);
+        });
+    }
+
     {
         const font = await Image.renderText(await fs.readFile('./tests/fonts/carbon phyber.ttf'), 128, 'ThE qUiCk');
         const encoded = await font.encode(1, {creationTime: 0, software: ''});