Merge pull request #81 from Chiman2937/fix/next-font-local-nextjs-vite

fix: resolve next/font/local loading issues

Author: valentinpalkovic

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

@@ -72,7 +72,9 @@ 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}`});
+          ${weight ? `font-weight: ${weight};` : ""}
+          ${style ? `font-style: ${style};` : ""}
 					${fontDeclarations}
 				}`;
       }
@@ -86,7 +88,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}

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}` : ""}`;
 }