fix: loading custom font in nuxt module

Author: stafyniaksacha

examples/nuxt/app.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { links } from 'unplugin-fonts/head'
-import src from 'unfonts.css?raw'
 </script>
 
 <template>
@@ -10,9 +9,6 @@ import src from 'unfonts.css?raw'
   <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
   <div class="fontsource-variable">I'm a Noto Sans JP Variable fontsource</div>
   <pre>links: {{ links }}</pre>
-  <ClientOnly>
-    <pre>src: {{ src }}</pre>
-  </ClientOnly>
   <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
 </template>
 

examples/nuxt/nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     custom: {
       display: 'swap',
       families: {
-        'Dancing Script': './assets/fonts/DancingScript*',
+        'Dancing Script': './public/fonts/DancingScript*',
       },
     },
 

examples/nuxt/assets/fonts/DancingScript-Bold.ttf renamed to examples/nuxt/public/fonts/DancingScript-Bold.ttf

@@ -3,7 +3,7 @@ import type { CustomFontFace, CustomFontFamily, CustomFonts } from '../types'
 import fg from 'fast-glob'
 import { basename as _basename, extname, join, relative } from 'pathe'
 
-type ResolvedCustomFonts = Required<Omit<CustomFonts, 'families'>> & { families: CustomFontFamily[] }
+type ResolvedCustomFonts = Required<Omit<CustomFonts, 'families' | 'linkFilter'>> & { families: CustomFontFamily[], linkFilter?: CustomFonts['linkFilter'] }
 
 function resolveUserOption(options: CustomFonts): ResolvedCustomFonts {
   let {
@@ -14,6 +14,7 @@ function resolveUserOption(options: CustomFonts): ResolvedCustomFonts {
     injectTo = 'head-prepend',
     display = 'auto',
     stripPrefix = 'public/',
+    linkFilter,
   } = options
 
   // --- Cast as array of `CustomFontFamily`.
@@ -33,6 +34,7 @@ function resolveUserOption(options: CustomFonts): ResolvedCustomFonts {
     injectTo,
     display,
     stripPrefix,
+    linkFilter,
   }
 }
 

examples/nuxt/assets/fonts/DancingScript-Medium.ttf renamed to examples/nuxt/public/fonts/DancingScript-Medium.ttf

@@ -1,10 +1,8 @@
-// Workaround for:
-// src/nuxt.ts(5,1): error TS2742: The inferred type of 'default' cannot be named without a reference to '.pnpm/@[email protected][email protected]/node_modules/@nuxt/schema'. This is likely not portable. A type annotation is necessary.
-import type {} from '@nuxt/schema'
 import type { Options } from './types'
-import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'
+import { addTemplate, addVitePlugin, addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'
 import unplugin from '.'
 import { getHeadLinkTags } from './loaders'
+import { customVirtualModule } from './loaders/custom'
 import { fontsourceImports } from './loaders/fontsource'
 
 export default defineNuxtModule({
@@ -15,18 +13,22 @@ export default defineNuxtModule({
   setup(options: Options, nuxt) {
     if ('fontsource' in options || 'custom' in options) {
       nuxt.options.css ||= []
-      nuxt.options.css.push('unfonts.css')
-      if ('fontsource' in options) {
+      if (options.fontsource) {
         for (const src of fontsourceImports(options.fontsource))
           nuxt.options.css.push(src)
+      }
+
+      if (options.custom) {
+        nuxt.options.css.push('#build/unfonts.css')
+        options.custom.prefetchPrefix = nuxt.options.runtimeConfig.app.buildAssetsDir
 
-        delete options.fontsource
+        addTemplate({
+          filename: 'unfonts.css',
+          getContents: () => customVirtualModule(options.custom!, nuxt.options.rootDir),
+        })
       }
     }
 
-    if (options.custom)
-      options.custom.prefetchPrefix = nuxt.options.runtimeConfig.app.buildAssetsDir
-
     const links = getHeadLinkTags(options)
 
     nuxt.options.app.head ||= {}

examples/nuxt/assets/fonts/DancingScript-Regular.ttf renamed to examples/nuxt/public/fonts/DancingScript-Regular.ttf

@@ -12,4 +12,5 @@ export default <Options>{
   format: ['cjs', 'esm'],
   dts: true,
   onSuccess: 'npm run build:fix',
+  external: ['@nuxt/schema', '@nuxt/kit'],
 }