@fontsource/merriweather-sans is not loaded in 1.6.x, ok in 1.5.x

[patrickdung]

What version of astro are you using?

1.6.x

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

My blog works with Astro 1.5.3. After upgrade to Astro 1.6.7 (1.6.x). The font is not loaded.

I load it in package.json

    "@fontsource/merriweather-sans": "^4.5.10",

Then in Astro template

<style is:global>

  @import "@fontsource/merriweather-sans/latin-400.css";
  @import "@fontsource/merriweather-sans/latin-700.css";

  html, body {

    font-family: "Merriweather Sans", "Rubik", "Noto Sans", "Roboto", "system-ui", sans-serif;

It's ok on 1.5.3, no error messages. When it is on 1.6.7 (1.6.0-1.6.7), there is error message during build. I won't load the Merriweather Sans font in the output html.

./files/merriweather-sans-latin-400-normal.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

./files/merriweather-sans-latin-700-normal.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-regular-subset.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-bold-subset.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-italic-subset.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-bolditalic-subset.woff2 referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

./files/merriweather-sans-latin-400-normal.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

./files/merriweather-sans-latin-700-normal.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-regular-subset.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-bold-subset.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-italic-subset.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

fonts/hack-bolditalic-subset.woff referenced in /data/projects/webdev/astro/projects/cloudnative-quest-astro/src/components/CommonStyle.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
11:40:08 PM [build] Completed in 4.95s.

Link to Minimal Reproducible Example

n/a

Participation

• [ ] I am willing to submit a pull request for this issue.

[mzaien]

I've tried it with development & production server I'm using lastest astro version + pnpm Plus I Imported fonts on the server part

[mzaien]

Found the right way to use fontsource in the docs https://docs.astro.build/en/guides/fonts/#using-fontsource

[patrickdung]

Thanks for the help!

I am not aware the method of loading it is changed between 1.5.x and 1.6.x.

For me, it's

<style is:global>

  @import "@fontsource/merriweather-sans/latin-400.css";
  @import "@fontsource/merriweather-sans/latin-700.css";

New version (1.6) should put the import statement inside the top section and use import (not @import)

---
---