Support fonts from npm packages
jojomatik opened this issue · 1 comments
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.
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.