Skip to content

Conversation

@Chiman2937
Copy link
Contributor

@Chiman2937 Chiman2937 commented Dec 6, 2025

Hi, @valentinpalkovic !

I've applied the same fix from #32998 to the Vite plugin and discovered additional bugs that needed to be addressed.

Summary

This PR fixes two critical bugs that prevented local fonts from loading correctly in development mode with next/font/local.

Changes

1. Fix: Support top-level weight/style in next/font/local with string src

2. Fix @fs URL formatting and CSS syntax in @font-face (new bug) ✨

Commit: fix: add slash separator and semicolon in @font-face CSS

Issues Fixed:

  • Missing slash between @fs prefix and font path

    • Before: /@fsC:/path/to/font.woff2 → 404 error
    • After: /@fs/C:/path/to/font.woff2 → 200 (works correctly)
  • Missing semicolon after src property in @font-face rule

    • This caused CSS parsing errors, preventing font requests entirely

Files Changed:

  • src/plugins/next-font/local/get-font-face-declarations.ts

Before:

  @font-face {
    font-family: font-5c0ab9;
    // ❌ missing / after @fs
    // ❌ missing ; after src value
    src: url(/@fsC:/git/WeGo/WeGo/src/assets/fonts/PretendardVariable.woff2)
    font-weight: 45 920;
  }

After:

  @font-face {
    font-family: font-5c0ab9;
    src: url(/@fs/C:/git/WeGo/WeGo/src/assets/fonts/PretendardVariable.woff2);
    font-weight: 45 920;
  }

Test Result for second issue

💡 1. load font with next font local like under:

export const pretendard = localFont({
  src: [{ path: '../assets/fonts/PretendardVariable.woff2', weight: '45 920' }],
  variable: '--font-pretendard',
  display: 'swap',
});

❌ before add / after @fs

image

✅ after add / after @fs

image

💡 2. load font with next font local like under:

export const pretendard = localFont({
  src: '../assets/fonts/PretendardVariable.woff2', //variable font
  variable: '--font-primary',
  display: 'swap',
  weight: '45 920', //variable weight
});

❌ before add ; after src value & add / after @fs

image

no request for font / because of invalid css (missing ;)

✅ after add ; after src value & add / after @fs

image

The @fs URL prefix was concatenated directly with the font file path,
creating invalid URLS like `/@fsc:/path` insted of `/@fs/C:path`.

Additionally, the src property was missing a semicolon, causing CSS
parsing errors and preventing font requests from being made.

This caused 404 errors and font loading failures in dev mode.
- Add top-level weight and style to @font-face when src is a string
- Exclude variable font weight ranges from className (only static weights)
- Align with Next.js localFont behavior
@Chiman2937 Chiman2937 changed the title fix: resolve local font loading issues in development mode fix: resolve local font loading issues Dec 6, 2025
@Chiman2937 Chiman2937 changed the title fix: resolve local font loading issues fix: resolve next/font/local loading issues Dec 6, 2025
@valentinpalkovic valentinpalkovic added the patch Increment the patch version when merged label Dec 10, 2025
@valentinpalkovic valentinpalkovic merged commit 3376274 into storybookjs:main Dec 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

patch Increment the patch version when merged

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants