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..8f034e5 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,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} 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}` : ""}`; }