Support fonts from npm packages

[jojomatik]

Request Description

It should be possible to preload fonts retrieved from npm packages such as @fontsource/roboto.

I've had no luck specifying /node_modules/@fontsource/roboto/index.css as the source as follows:

  fontLoader: {
    local: [
      {
        src: "/node_modules/@fontsource/roboto/index.css",
        family: "Roboto",
        preload: true,
      },
    ],
  },

That adds

<link rel="preload" as="font" type="font/css" crossorigin="anonymous" ref="/node_modules/@fontsource/roboto/index.css">

to the html head. That in turn seems to just throw a warning in the console: <link rel=preload> has an unsupported `type` value

Alternative Solutions

Is there another way to preload fonts from npm packages (that makes this package unnecessary for this use case)? Am I overlooking something?

Additional Details

In my project (https://github.com/jojomatik/nuxt-3-base), I currently load the font in /plugins/vuetify.ts with an import statement. Unfortunately that means that the font is only loaded after the js is loaded and parsed.

You can use that project as a testing playground if you want to.

[ivodolenc]

Hi, thanks for the suggestion.

Currently, that kind of font loading is not possible and I believe I won't be adding support for it, at least not for now.

Module is very simple and lightweight and wouldn't want to complicate things. If you want to load fonts via this module, you can use the Local or the External method, everything is explained in the documentation.

As far as I understand, what you want to achieve is possible, but via the External method for Google Fonts.

Although it is recommended to download the font and use the Local method because it provides more customization and control.