cssninjastudio/unplugin-fonts

Universal Webfont loader - Unfonts - based on https://web.dev/optimize-webfont-loading/

unplugin-fonts's Issues

prefetch: true it's not working

Iv'e tried using the prefetch boolean within custom but it's throwing a type error:

Type '{ families: { name: string; local: string; src: string; }[]; display: "swap"; preload: true; prefetch: true; }' is not assignable to type 'CustomFonts'.
  Object literal may only specify known properties, and 'prefetch' does not exist in type 'CustomFonts'.ts(2322)
index.d.ts(78, 5): The expected type comes from property 'custom' which is declared here on type 'VitePluginFontsOptions'

Multiple custom fonts from same family

I have a few fonts of Rubik family and I would like to load them as shown in the example
But this code loads only one font :(

ViteFonts({
  custom: {
    families: {
      Rubik: './assets/fonts/Rubik*'
    }
  }
})

This is the only ugly way it has worked for me so far

ViteFonts({
  custom: {
    families: [
      {
        name: 'Rubik-Medium',
        local: 'Rubik-Medium',
        src: './assets/fonts/Rubik-Medium.ttf'
      },
      {
        name: 'Rubik-Regular',
        local: 'Rubik-Regular',
        src: './assets/fonts/Rubik-Regular.ttf'
      },
      {
        name: 'Rubik-Bold',
        local: 'Rubik-Bold',
        src: './assets/fonts/Rubik-Bold.ttf'
      },
      {
        name: 'Rubik-Light',
        local: 'Rubik-Light',
        src: './assets/fonts/Rubik-Light.ttf'
      }
    ]
  }
})

Feature request: rel="prefetch"

Please set option prefetch: true, to add rel="prefetch" in place of rel="preload".
Thank you.

[Bug]: Issues with astro (example and Astro 3)

Demo URL

No response

What happened?

When using Astro 3 with fontsource (version 4), fonts are not included in the bundled css.

The component does not seem to be recognised as an Astro component:

It does seem like the component is just ignored by Astro.

There is also a weird behaviour with a []unfonts.css that is trying to be included as a style tag (see below). When reading the documentation I was under the impression that when using fontsource, no font-face tags or other CSS would be bundled...

... however, i see the same issue when running your examples/astro-project:

To me, this seems like 3 related issues:

1. no link tags are included when using fontsource with your Astro setup
2. a non-existing css file is attempted to be included when using fontsource and your Astro setup
3. project does not support Astro 3 (alternatively, documentation does not state that project does not support Astro 3)

Reproduction steps

for issues 1 and 2:
1. run the example Astro project
2. inspect in the browser
3. you will see no link tag to the font file
4. you sill see a style tag with [missing symbol]unfonts.css
5. go to network tab
6. see failed request to same unfonts.css

for issue 3:
1. update example Astro project to Astro 3. Alternatively, try to use this package in an Astro 3 project
2. try to build project and Astro / Vite / typescript should complain about the missing component
2. observe fonts not being applied or loaded
3. verify that the bundled css includes no font-face tags
4. further verify that no requests are tried for the used font
4.

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

doesnt work

custom fonts dont work

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path";
import ViteFonts from "vite-plugin-fonts";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    ViteFonts({
      custom: {
        families: {
          "Gilroy-Light": "./src/fonts/Gilroy-Light.otf",
        },
      },
    }),
  ],
});

Support: How to deal with installed fonts such as fontsource/roboto

Hi,

I'm using fontsource to bundle fonts alongside my website, but the fonts are loaded as font-face css blocks when the file is imported, and that leads to the fonts not being prefetched.

I wanted to use this package to deal with that and add prefetch directives for the fonts, however I'm unsure how to configure that.

I import '@fontsource/roboto at my React entrypoint, but that is too late for a Vite plugin to see the fonts.

Any suggestions on the pattern to tackle installed fonts?

Feature request: Ability to configure which fonts are preloaded

Preloading a few hundred kb of fonts can have a fairly big impact, it would be great if we were able to define a whitelist of fonts which we do want preloaded, and just allow CSS to fetch and swap in less used fonts on-demand.

Support weight prefixed local fonts

Right now a very quirky-looking method checks the filename and extracts the weight value.
Instead, I suggest the much simpler weight number prefix at the end of the filename, like "Arial-200.ttf" where 200 is extracted as the weight. I think it's more common than the "Arial-extralight.ttf" variant.

But the easiest approach would be to just simply delegate the weight extraction to the user by adding a callback to the config like this:

VitePluginFonts({
      custom: {
        getWeight: (x) => {....},
        families: [ ... ]

We accept PRs 🙂

I'm aware of that, thanks for mentioning.

Migrate to unjs

Migrate this plugin to support vite / rollup / webpack / nuxt3

https://github.com/unjs/unplugin

Support local ttf files

I have local ttf files in my project that would be nice to load with a plugin like this instead of manually through a global css file

[Feature]: Add support for vite 5

Demo URL

No response

Describe the feature

Everything seems to work fine, except the unmet peer dependency warning.

ERR_REQUIRE_ESM with Vite 3.1.5

Since [email protected] it gives this error in console; is there a solution to this?

Full console log:

failed to load config from C:\---\vite.config.js
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\---\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-fonts\dist\index.mjs not supported.
Instead change the require of C:\---\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-fonts\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\---\vite.config.js:42:32)
    at Object._require.extensions.<computed> [as .js] (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63524:24)
    at loadConfigFromBundledFile (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63532:21)
    at loadConfigFromFile (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63400:34)
    at async resolveConfig (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63017:28)
    at async createServer (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:62083:20)
    at async CAC.<anonymous> (file:///C:/---/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/cli.js:700:24)
 ELIFECYCLE  Command failed with exit code 1.

I'm using it like this:

import { VitePluginFonts } from 'vite-plugin-fonts'

export default defineConfig({
  // ...more config
  plugins: [
    // ...more plugins
    VitePluginFonts({
      google: {
        families: [
          {
            name: 'Roboto Flex',
            styles: '...',
          },
        ],
      },
    }),
  ],
})

any help would be appreciated 🙏

[Feature]: Provide options for font extension order

Demo URL

https://github.com/Gumball12/unplugin-fonts-ext-ordering-reproduction

Describe the feature

https://github.com/Gumball12/unplugin-fonts-ext-ordering-reproduction

Font extensions can be reordered via the transform field. I think it would be a better package if this were an option.

[Bug]: Unfonts not callable

Demo URL

No response

What happened?

I get the following typescript error:
This expression is not callable. Type 'UnpluginInstance<Options | undefined, boolean>' has no call signatures.ts(2349)

Reproduction steps

Add the following config to `vite.config.ts`:
import Unfonts from 'unplugin-fonts';

`export default defineConfig({
  plugins:[
    Unfonts({
      custom: {
      /* config here */
      }
    })
  ]
})`

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

MacOS

Font weight detection as string may be inaccurate

I really appreciate your plugin. While using it for a local font I discovered, that loading a bunch of them for a certain font weight (indicated by the string name) might fail if a bold and an [extra|ultra]bold is used. If I correctly understand the few lines here, the partial string matching will never work for/reach [extra|ultra]bold.

In case you agree, I can contribute a PR?!

[Bug]: Type custom did not generate @font-face

Demo URL

No response

What happened?

I can not find anywhere the following @font-face-code in the generated files:

unplugin-fonts/src/loaders/custom.ts

Lines 210 to 218 in 941d019

	return [
	'@font-face {',
	` font-family: '${face.name}';`,
	` src: ${[srcs, locals].filter(Boolean).join(',')};`,
	` font-weight: ${face.weight};`,
	` font-style: ${face.style};`,
	` font-display: ${face.display};`,
	'}',
	].join('\n')

vite-config is in a subdir (config/vite.config.ts)
The assets are in assets/common but will be copied in production to dist/-root folder, that is why i use transform() to correct the path.

unplugin-fonts config:

//...
      custom: {
        families: [
          {
            name: 'Pacifico',
            local: 'Pacifico',
            src: '../assets/common/fonts/pacifico/*.ttf',
            transform(font) {
              // correct frontend path
              font.files.forEach((file) => {
                file.path = file.path.replace('assets/common/', '')
              })
console.log(JSON.stringify(font, null, 2))
              return font
            },
          },
        ],
        display: 'auto',
        preload: true,
        prefetch: false,
        injectTo: 'head-prepend',
      },

Output from console.log above

{
  "source": "../assets/common/fonts/pacifico/*.ttf",
  "name": "Pacifico",
  "basename": "Pacifico-Regular",
  "weight": 400,
  "style": "normal",
  "local": "Pacifico",
  "display": "auto",
  "files": [
    {
      "src": "/myapp/assets/common/fonts/pacifico/Pacifico-Regular.ttf",
      "path": "/fonts/pacifico/Pacifico-Regular.ttf",
      "format": "truetype",
      "ext": ".ttf"
    }
  ]
}

index.html contains

  <head>
    <script type="module" src="/@vite/client"></script>
    <link rel="preload" as="font" type="font/ttf" href="/fonts/pacifico/Pacifico-Regular.ttf" crossorigin>

The font is loaded, but it can't be displayed, cause there is no css code for @font-face.

Reproduction steps

Usa a custom font.

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

[Bug]: SvelteKit example doesn't build

How to reproduce

Running pnpm run build complains about Error: Not found: /src/assets/fonts/DancingScript-Bold.ttf

Error on start: TypeError: VitePluginFonts is not a function

My package.json

{
  "name": "",
  "version": "0.0.0",
  "author": "",
  "license": "Proprientary",
  "scripts": {
    "start": "vite",
    "build": "vue-tsc --noEmit --skipLibCheck && vite build",
    "lint": "eslint src",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vueuse/core": "^9.8.2",
    "axios": "^1.2.1",
    "date-fns": "^2.29.3",
    "naive-ui": "^2.34.2",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.28",
    "prism-theme-vars": "^0.2.4",
    "qs": "^6.11.0",
    "vue": "^3.2.45",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@iconify/json": "^2.1.155",
    "@types/node": "^18.11.17",
    "@types/svgo": "^2.6.4",
    "@typescript-eslint/eslint-plugin": "^5.47.0",
    "@typescript-eslint/parser": "^5.47.0",
    "@vicons/carbon": "^0.12.0",
    "@vicons/utils": "^0.1.4",
    "@vitejs/plugin-legacy": "^3.0.1",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "3.0.0",
    "@windicss/plugin-scrollbar": "^1.2.3",
    "eslint": "^8.30.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.8.0",
    "lint-staged": "^13.1.0",
    "prettier": "^2.8.1",
    "sass": "^1.57.1",
    "typescript": "^4.9.4",
    "unplugin-auto-import": "^0.12.1",
    "unplugin-icons": "^0.14.15",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^4.0.3",
    "vite-plugin-fonts": "^0.7.0",
    "vite-plugin-windicss": "^1.8.10",
    "vite-svg-loader": "^3.6.0",
    "vue-tsc": "^1.0.16"
  },
  "type": "module",
  "lint-staged": {
    "*.{ts,js,vue}": [
      "eslint"
    ]
  }
}

Support Vite 5.0

Demo URL

No response

Describe the feature

Vite 5.0 has been released - https://github.com/vitejs/vite/blob/v5.0.0/packages/vite/CHANGELOG.md

plugin 'unplugin-fonts' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unplugin-fonts' uses deprecated 'transform' option. Use 'handler' option instead.

  VITE v5.0.0  ready in 287 ms

  ➜  Local:   http://localhost:3001/
  ➜  Network: http://192.168.90.63:3001/
  ➜  press h + enter to show help

support vite 3

atm:

vite-plugin-fonts
│ └── ✕ unmet peer vite@^2.0.0: found 3.0.2

[Bug]: Latest fontsouce versions >5 does not work with variable fonts

Demo URL

https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md#breaking-changes

What happened?

Hi,

This looks like a great project! However, when testing it out I had some issues setting it up following your guide. It turns out that the reason I was having issues is that since version 5 of fontsource, they have split variable fonts into their own packages.

Ideally this repo should be updated to handle variable fonts, but a quick fix would be to update the documentation with a warning and clear information in the example configs that version ^4 needs to be used.

Reproduction steps

1. Follow the setup guide for fontsource
2. use the template config with fontsource
3. get error messages as stated below

Relevant log output

`ENOENT: no such file or directory, open '@fontsource/cabin/variable-full.css'`

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

[Bug]: Not working after switch from vite-plugin-fonts

Demo URL

No response

What happened?

Switched to unplugin-fonts by this guide https://github.com/cssninjaStudio/unplugin-fonts/releases/tag/v1.0.0
No warnings or errors and no links with fonts injected

"vite": "^3.0.5",
-"vite-plugin-fonts": "^0.7.0"
+"unplugin-fonts": "^1.0.0

-import { VitePluginFonts } from 'vite-plugin-fonts'
+import  Unfonts from 'unplugin-fonts/vite';

-VitePluginFonts({
+Unfonts({
    custom: {
        display: 'swap',
        families: {
            Basketcase: {
                src: resolveApp('public/fonts/BasketcaseRomanNumbers*')
            }
        }
    }
}),

Reproduction steps

1. Used guide to switch from `vite-plugin-fonts` to `unplugin-fonts/vite`

Relevant log output

No response

What browsers are you seeing the problem on?

Chrome

What is your operating system?

MacOS

Using with typescript

Hey, awesome plugin!

Adding the virtual import leads to an unresolved import error from eslint:

Unable to resolve path to module 'virtual:fonts.css'.

Some plugins have a solution like this (from: https://www.npmjs.com/package/vite-plugin-virtual-plain-text )

// declaration.d.ts
/// <reference types="vite-plugin-virtual-plain-text/virtual-assets" />

Anything similar here?

[Bug]: typekit Get Url error

Demo URL

No response

What happened?

typekit: { id:${myTypekitId}, defer: false, injectTo: 'body', }

When executing the above code
GET https://use.typekit.net/myTypekitId.css net::ERR_ABORTED 412 (Precondition Failed)
An error occurs.

In fact, if you run the code provided by Typekit locally, you need to get the css code here at https://use.typekit.net/myTypekitId.js

to sum up
https://use.typekit.net/myTypekitId.css (X)
https://use.typekit.net/myTypekitId.js (O)

Reproduction steps

1.
2.
3.
...

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

Is there a way to inject link attributes to the generated link tag?

Dont work in dev mode

This is the code i'm using:

VitePluginFonts({
  custom: {
    families: [
    {
      name: 'Mainson Neue',
      src: './src/fonts/regular/*',
    },
    {
      name: 'Mainson Neue Extended',
      src: './src/fonts/extended/*',
    }
    ],
  },
})

It adds an fonts.css (http://localhost:5173/@vite-plugin-fonts/fonts.css) with the hot replacement, but the url for the files is url(/src/fonts/font-name). It should add the localhost in front i guess?
In build mode it generates the right font file with hashed names etc.
Using Vite 3.0.9

Anyone else have this problem.

Support installed webfont packages

Support webfonts installed as a NPM package, like @mdi/font

[Bug]: Fontsource loader writes wrong path

Hello,

these two cases push an additional / breaking import statement.

unplugin-fonts/src/loaders/fontsource.ts

Lines 66 to 71 in a7e66d5

	source.push(`import '@fontsource-variable/${name}/standard.css';`)
	continue
	}
	// If the selected axes is not within standard, return full
	source.push(`import '@fontsource-variable/${name}/full.css';`)

The build step then breaks:

transforming (1) index.htmlUnable to resolve `@import "import '@fontsource-variable/open-sans/standard.css';"` from /undebug
✓ 4 modules transformed.
x Build failed in 84ms
error during build:
Error: [vite:css] [postcss] ENOENT: no such file or directory, open 'import '@fontsource-variable/open-sans/standard.css';'
file: unfonts.css:undefined:NaN

The logic for variable is also odd, it does not matter if opsz is true or false, simply being there has unintended side effects.

Vite stops working after plugin installation

Well I don't know what to do so I ask here to find out if there is a reason this is happening.

The problem is that just by installing this plugin my app with vite does not start anymore, if I uninstall it, it keeps showing the message: Error: Cannot find module 'cac'.

My solution was worse, which was to uninstall and reinstall all the modules, now it seems that it starts but does not work, and when doing build I get a rollup error, not even cloning the repo seems to work .-. :/

I don't think the second is something related to the plugin, I was probably using a version of vite compatible with other modules but now since it is not, I get the error.

The question is, what could have caused it?

files in the public directory are served at the root path.

files in the public directory are served at the root path.
Instead of /public/fonts/readex/ReadexPro-bold.ttf, use /fonts/readex/ReadexPro-bold.ttf.
files in the public directory are served at the root path.
Instead of /public/fonts/readex/ReadexPro-ExtraLight.ttf, use /fonts/readex/ReadexPro-ExtraLight.ttf.

Any way to fix this error? Most probably the generated css will need to be changed a bit

Nuxt3 Support

Hello guys! I tried to add the plugin into a NUXT3 app using vite, but it seems not to be working. Am I doing something wrong? I'm using the latest version (RC4) from Nuxt3.
My nuxt.config.ts is like this:

import { defineNuxtConfig } from 'nuxt'
import { VitePluginFonts } from 'vite-plugin-fonts'

export default defineNuxtConfig({

  vite: {
    plugins: [
      VitePluginFonts({
        google: {
          families: [{name:'Barlow', styles:'wght@100;300;400'}]
        },
      })
    ]
  }

})

How can Inject Google font in Nuxt3?

Hi, is there any way to inject fonts in Nuxt3?
I was wondering bout this sentence in the doc:
⚠️ This will not inject Google/Typekit fonts, only custom fonts will be loaded.

Support remote webfonts

Support webfonts URLs (like Google, but from a custom provider)

Option HtmlTagDescriptor injectTo

Please add an option for position injection to custom fonts preload or prefetch inject mode to use as parameter for HtmlTagDescriptor:

From Vite documentation:
https://vitejs.dev/guide/api-plugin.html#transformindexhtml

  /**
   * default: 'head-prepend'
   */
  injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend'

This is because Lighthouse complain about <meta> tag not in the first 1024 bytes of the HTML .
Thank you.

Support for additional option in custom font specification

Currently there is no way to specify separately path to scan for actual files and url that will be in the @font-face rule.
Therefore there is no way to use public directory without having many warnings to store our fonts.

Feature: Adding possibility to choose unicode range

Hey ! First, thank you very much for this very useful plugin !
I'm currently trying to optimize my website and being able to select a unicode range for Google font would be very useful te reduce bundle size 🤗
Thank you 🙏

[Bug]: Can't find fontsource font files in Nuxt 3

Demo URL

No response

What happened?

I am adding some fonts from fontsource and have error in log:

[Vue Router warn]: No match found for location with path "/_nuxt/%EF%BF%BDunfonts.css"
[Vue Router warn]: No match found for location with path "/node_modules/@fontsource/el-messiri/files/el-messiri-cyrillic-700-normal.woff"
[Vue Router warn]: No match found for location with path "/node_modules/@fontsource/montserrat/files/montserrat-cyrillic-800-normal.woff"
[Vue Router warn]: No match found for location with path "/__webpack_hmr/client"

"nuxt": "3.8.0"

I've installed two fonts

    "@fontsource/el-messiri": "^5.0.8",
    "@fontsource/montserrat": "^5.0.15",

Configuring nuxt.config.ts

...
 modules: [
...
   'unplugin-fonts/nuxt',
 ],
unfonts: {
   fontsource: {
     families: [
       {
         name: 'El Messiri',
         weights: [700],
         subset: 'cyrillic',
       },
       {
         name: 'Montserrat',
         weights: [800],
         subset: 'cyrillic',
       },
     ],
   },
 },

And importin unfonts.css in app.vue:

<script setup>
import { NuxtLayout, NuxtPage } from '#components';
import 'unfonts.css';
</script>

And after importing unfont.css strange symbol in path and id:
http://localhost:3000/_nuxt/%EF%BF%BDunfonts.css
data-vite-dev-id="unfonts.css"

Reproduction steps

1. Installing fontsource fonts:
2. Configuring Nuxt
3. Start dev

Relevant log output

terminal:

[Vue Router warn]: No match found for location with path "/_nuxt/%EF%BF%BDunfonts.css"
[Vue Router warn]: No match found for location with path "/node_modules/@fontsource/el-messiri/files/el-messiri-cyrillic-700-normal.woff"
[Vue Router warn]: No match found for location with path "/node_modules/@fontsource/montserrat/files/montserrat-cyrillic-800-normal.woff"
[Vue Router warn]: No match found for location with path "/__webpack_hmr/client"


browser:

GET http://localhost:3000/_nuxt/%EF%BF%BDunfonts.css net::ERR_ABORTED 404 (Page not found: /_nuxt/%EF%BF%BDunfonts.css)
GET http://localhost:3000/node_modules/@fontsource/el-messiri/files/el-messiri-cyrillic-700-normal.woff2 net::ERR_ABORTED 404 (Page not found: /node_modules/@fontsource/el-messiri/files/el-messiri-cyrillic-700-normal.woff2)
GET http://localhost:3000/node_modules/@fontsource/montserrat/files/montserrat-cyrillic-800-normal.woff2 net::ERR_ABORTED 404 (Page not found: /node_modules/@fontsource/montserrat/files/montserrat-cyrillic-800-normal.woff2)

What browsers are you seeing the problem on?

Chrome

What is your operating system?

Linux

ViteFonts is not a function

Whenever I import the plugin and use even the example given for Google's font set I get the following:

error during build:
TypeError: ViteFonts is not a function
    at file:///Users/pq/Developer/browser-ext/vite.config.ts.js?t=1651738748263:13:5
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadConfigFromFile (/Users/pq/Developer/browser-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:61894:31)
    at async resolveConfig (/Users/pq/Developer/browser-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:61436:28)
    at async doBuild (/Users/pq/Developer/browser-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:41317:20)
    at async build (/Users/pq/Developer/browser-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:41305:16)
    at async CAC.<anonymous> (/Users/pq/Developer/browser-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:738:9)
 ELIFECYCLE  Command failed with exit code 1.```

Feature request: woff/woff2 support

If I get it right it's only possible to import .ttf.

Would be great to support other formats as well.

Is this tool downloads fonts?

Hello!

Does this package download fonts into bundle?

[Bug]: Local fonts are note preloaded in Vite 5 since v1.1.1

Demo URL

No response

What happened?

Since updating to the latest unplugin-fonts (v1.1.1), local fonts no longer get preloaded in Vite 5.0.2. Preloading custom fonts works fine in Vite v5 with unplugin-fonts v1.0.3. This results in custom fonts flashing on each page load, as custom fonts start loading only after DOM has finished loading. The preload tags get added properly on build, but not in dev.

Reproduction steps

1. Run the vite-5 example, adding preload: true to the custom config
2. Witness the following <head></head> content, missing preload tags:

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
  <link rel="stylesheet" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Crimson Pro&amp;family=Open Sans&amp;family=Material+Icons&amp;display=swap">

  <script type="module" src="/@vite/client"></script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
<style type="text/css" data-vite-dev-id="�unfonts.css">/* abeezee-latin-ext-400-italic*/
@font-face {
  font-family: 'ABeeZee';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-latin-ext-400-italic.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-all-400-italic.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* abeezee-latin-400-italic*/
@font-face {
  font-family: 'ABeeZee';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-latin-400-italic.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-all-400-italic.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* truculenta-vietnamese-400-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-vietnamese-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* truculenta-latin-ext-400-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-ext-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* truculenta-latin-400-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* truculenta-vietnamese-700-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-vietnamese-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* truculenta-latin-ext-700-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-ext-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* truculenta-latin-700-normal*/
@font-face {
  font-family: 'Truculenta';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
</style><style type="text/css" data-vite-dev-id="/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/examples/vite-5/style.css">body {
  font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a {
  font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
}

h2 {
  font-family: "Dancing Script", sans-serif;
  font-size: 3rem;
  font-weight: 600;
}


.fontsource-abeezee { 
  font-family: "ABeeZee", sans-serif;
}

.fontsource-truculenta {
  font-family: "Truculenta", sans-serif;
}
</style></head>

### Relevant log output

_No response_

### What browsers are you seeing the problem on?

_No response_

### What is your operating system?

_No response_

[Bug]: Font not loading in Sveltekit

Demo URL

https://stackblitz.com/edit/sveltejs-kit-template-default-yh1zpq?file=jsconfig.json

What happened?

Thank you for this cool lib :)

I couldn't get it to work on sveltekit. I think configured everything correctly, but the font still won't load.

Reproduction steps

1. Open Stackblitz
2. npm run dev
3. font isn't loaded/applied

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

Fonts for nested routes are not loaded properly

Hey, thank you for a great plugin!
I'm having an issue when loading fonts from a nested route. Here's an example where you can reproduce the issue:
https://stackblitz.com/edit/vitejs-vite-font-plugin-bug?file=src%2FApp.tsx

Steps to reproduce:

1. Go to /a/b/c route in the sandbox and refresh a page, check the network tab to see 404 error.

I think the issue is caused by injecting a relative path instead of an absolute one as a href attribute in the link tag. I'll post a PR that fixes the issue soon.