google` shim missing named exports for fonts like Figtree, DM_Sans, etc. #21

New issue

Closed

opened 2026-05-06 12:36:33 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:36:33 +02:00

Owner

Originally created by @solracnyc on GitHub (Feb 25, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/72

Environment

vinext: 0.0.8 (also reproduced on 0.0.5)
Next.js: 16.1.6
Platform: Cloudflare Workers + vinext dev

Reproduce

In any component (server or client): import { Figtree } from 'next/font/google'
vinext build → fails with something like "Figtree" is not exported by ".../shims/font-google.ts"

Inter in a Server Component layout works fine because the shim does export it (or handles it as default).

Root cause

The font shim (source) does not export Figtree (or other Google Fonts like DM_Sans, Poppins, etc.) as named exports. Only a subset of fonts appear to be shimmed.

This affects any app using non-default Google Fonts via next/font/google named imports.

Workaround

Replace the next/font/google import with a CSS @import from Google Fonts CDN:

/* In your CSS module */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@700&display=swap');

Then use font-family: 'Figtree', system-ui, sans-serif directly in CSS instead of the JS font object's className.

Suggested fix

Either generate named exports for all Google Fonts (matching Next.js behavior), or document the CSS @import workaround as the recommended approach for fonts beyond the currently shimmed set.

Verified on 0.0.8 — the font shim source still lacks these named exports.

Originally created by @solracnyc on GitHub (Feb 25, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/72 ## Environment - **vinext**: 0.0.8 (also reproduced on 0.0.5) - **Next.js**: 16.1.6 - **Platform**: Cloudflare Workers + `vinext dev` ## Reproduce 1. In any component (server or client): `import { Figtree } from 'next/font/google'` 2. `vinext build` → fails with something like `"Figtree" is not exported by ".../shims/font-google.ts"` `Inter` in a Server Component layout works fine because the shim does export it (or handles it as default). ## Root cause The font shim ([source](https://github.com/cloudflare/vinext/blob/4d0a00864446d482e573710e06936ad0cc3e1eb2/packages/vinext/src/shims/font-google.ts)) does not export `Figtree` (or other Google Fonts like `DM_Sans`, `Poppins`, etc.) as named exports. Only a subset of fonts appear to be shimmed. This affects any app using non-default Google Fonts via `next/font/google` named imports. ## Workaround Replace the `next/font/google` import with a CSS `@import` from Google Fonts CDN: ```css /* In your CSS module */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@700&display=swap'); ``` Then use `font-family: 'Figtree', system-ui, sans-serif` directly in CSS instead of the JS font object's `className`. ## Suggested fix Either generate named exports for all Google Fonts (matching Next.js behavior), or document the CSS `@import` workaround as the recommended approach for fonts beyond the currently shimmed set. Verified on 0.0.8 — the font shim source still lacks these named exports.