Skip to content

I'm having a problem when using npm + fontsource as provider #830

@miguelCassimiro99

Description

@miguelCassimiro99

Hi guys, I replaced the @nuxtjs/google-fonts by the @nuxt/fonts and having a problem when using the recommendations from the doc.
I installed the two packages I need:

    "@fontsource/geist-mono": "^5.2.7",
    "@fontsource/nunito": "^5.2.7",
    "@nuxt/fonts": "^0.14.0",

And then set then on nuxt.config.ts:

  fonts: {
    provider: "google",
    families: [
      {
        name: "Nunito",
        provider: "npm",
        weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      },
      {
        name: "Geist Mono",
        provider: "npm",
        weights: [100, 200, 300, 400, 500, 600],
      },
    ],
  },

Notice if I remove the 'provider: "google"', it doesn't load the fonts correctly and use the fallback. If I set this provider google option, it starts a bunch of warning in the console like:

 WARN  Unknown provider npm for font family Nunito. Falling back to default providers.         @nuxt/fonts 8:27:39 PM

 WARN  Unknown provider npm for font family Geist Mono. Falling back to default providers.     @nuxt/fonts 8:27:39 PM
```.
However, it works somehow, besides this warning. I think it's downloading the fonts from Google anyway.

I'm following the instruction in the doc so I don't know what went wrong. I would be very pleased if someone could explain this problem. It is currently not affecting the Performance of the site, but I need to understand how to use the module correctly in this case.

Thanks a lot.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions