Feature Request: Automated Local Variable Font Tree-Shaking on Export

[oslogrolls]

Is your feature request related to a problem? Please describe.

Webstudio's Modern Font Stack implementation with zero-latency system font stacks provides an incredible performance baseline.

However, for complex layouts (e.g., product grids, micro-typography), designers rely on expressive Variable Fonts to fine-tune readability via parametric axes (GRAD for dark-mode/contrast, XTRA for inline density, opsz for scaling).

Full variable fonts, may carry massive payloads (>1.5 MB) due to several custom axes and global character sets.

While Google Fonts' dynamic Parametric API offers dynamic slicing, the feature is unusable for European deployments due to strict GDPR constraints on US data transfers (IP address logging).

Describe the solution you'd like
An automated, Font Tree-Shaking step integrated into Webstudio's Remix export/build pipeline.

During the build process, a lightweight parser scans the generated CSS, extracts the exact axis ranges used in the project, and automatically subsets the raw .woff2 font file. This gives designers complete typographic freedom with custom Variable Fonts while delivering near system-font-level payload (~30–50 KB) without GDPR liability. It would work only any variable font, regardless of origin.

Proposed Technical Specification (AI-Agent / LLM Friendly)
Pipeline Flow
[Webstudio Canvas] ──> [Export CSS/Styles]
│
▼
[PostCSS / AST Axis Extractor]
│
▼
[WASM HarfBuzz Slicer (Local Build)]
│
▼
[Optimized .woff2 (<50KB) ──> CF Edge Assets]

Task Breakdown for AI Coding Agents

• CSS AST Parsing Module (parseFontUsage.ts)
  • Scan generated project CSS/style JSONs for font-variation-settings, font-weight, font-stretch, and font-style.
  • Extract the global [min, max] bounding box for every active axis across the project.
  • Target Output: { wght: "300:700", GRAD: "-200:0", XTRA: "460:500" }
• WASM Font Slicing (subsetFont.ts)
  • Leverage a pure WebAssembly/JS HarfBuzz binding (e.g., @hbstack/subset or harfbuzzjs) inside the Node.js build pipeline.
  • Pin unreferenced axes to default values.
  • Restrict active variable axes strictly to the computed min:max ranges.
  • Limit Unicode characters to standard Latin sets (U+0000-017F, U+2000-206F, U+20AC).
• Remix / Vite Build Hook (vite-plugin-font-treeshake.ts)
  • Intercept @font-face declarations during the Remix build phase.
  • Execute subsetting, output optimized .woff2 files to /public/build/fonts/, and update CSS references.
  • Include a fallback to the original font file if parsing fails.
    Value Proposition & Definition of Done
• Complements System Font Stacks: Serves as the ultimate performance bridge when custom Variable Fonts are chosen over system fallbacks.
• 100% GDPR Compliant: Fully local build-time processing; zero third-party font CDN requests.
• Core Web Vitals Impact: Reduces variable font asset size by >95% (from up to ~1.6 MB to ~35 KB) automatically upon export.