From 54cbcd29d70b076fe1450a57896078193ca56a3a Mon Sep 17 00:00:00 2001 From: Chiman2937 Date: Sat, 6 Dec 2025 13:28:52 +0900 Subject: [PATCH 1/2] fix: add slash separator and semicolon in @font-face CSS 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. --- src/plugins/next-font/local/get-font-face-declarations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/next-font/local/get-font-face-declarations.ts b/src/plugins/next-font/local/get-font-face-declarations.ts index 4d35f08..44bed5a 100644 --- a/src/plugins/next-font/local/get-font-face-declarations.ts +++ b/src/plugins/next-font/local/get-font-face-declarations.ts @@ -72,7 +72,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { if ("fontReferenceId" in localFontSrc) { return dedent`@font-face { font-family: ${id}; - src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs${localFontSrc.fontPath}`}) + src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs/${localFontSrc.fontPath}`}); ${fontDeclarations} }`; } @@ -86,7 +86,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { .map((font) => { return dedent`@font-face { font-family: ${id}; - src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `/@fs${font.path.fontPath}`}); + src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `/@fs/${font.path.fontPath}`}); ${font.weight ? `font-weight: ${font.weight};` : ""} ${font.style ? `font-style: ${font.style};` : ""} ${fontDeclarations} From 11b21f5ccd31126357b5f6e0e563c93b888dead1 Mon Sep 17 00:00:00 2001 From: Chiman2937 Date: Sat, 6 Dec 2025 13:36:14 +0900 Subject: [PATCH 2/2] fix: support top-level weight/style in localFont with string src - 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 --- .../next-font/local/get-font-face-declarations.ts | 2 ++ src/plugins/next-font/utils/get-css-meta.ts | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/plugins/next-font/local/get-font-face-declarations.ts b/src/plugins/next-font/local/get-font-face-declarations.ts index 44bed5a..8f034e5 100644 --- a/src/plugins/next-font/local/get-font-face-declarations.ts +++ b/src/plugins/next-font/local/get-font-face-declarations.ts @@ -73,6 +73,8 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { return dedent`@font-face { font-family: ${id}; src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs/${localFontSrc.fontPath}`}); + ${weight ? `font-weight: ${weight};` : ""} + ${style ? `font-style: ${style};` : ""} ${fontDeclarations} }`; } diff --git a/src/plugins/next-font/utils/get-css-meta.ts b/src/plugins/next-font/utils/get-css-meta.ts index 3b3be1d..3700748 100644 --- a/src/plugins/next-font/utils/get-css-meta.ts +++ b/src/plugins/next-font/utils/get-css-meta.ts @@ -15,7 +15,12 @@ export function getCSSMeta(options: Options) { .${className} { font-family: ${options.fontFamily}; ${isNextCSSPropertyValid(options.styles) ? `font-style: ${options.styles[0]};` : ""} - ${isNextCSSPropertyValid(options.weights) ? `font-weight: ${options.weights[0]};` : ""} + ${ + isNextCSSPropertyValid(options.weights) && + !options.weights[0]?.includes(" ") + ? `font-weight: ${options.weights[0]};` + : "" + } } ${ @@ -39,7 +44,9 @@ export function getCSSMeta(options: Options) { function getClassName({ styles, weights, fontFamily }: Options) { const font = fontFamily.replaceAll(" ", "-").toLowerCase(); const style = isNextCSSPropertyValid(styles) ? styles[0] : null; - const weight = isNextCSSPropertyValid(weights) ? weights[0] : null; + const weight = isNextCSSPropertyValid(weights) + ? weights[0]?.replaceAll(" ", "-") + : null; return `${font}${style ? `-${style}` : ""}${weight ? `-${weight}` : ""}`; }