fix(nuxt): fontsource loading and custom font preloading

Author: stafyniaksacha

examples/astro/astro.config.mjs

@@ -33,7 +33,6 @@ export default defineConfig({
           {
             name: 'Truculenta',
             weights: [400, 700],
-            subset: 'latin-ext',
           },
         ],
       },

examples/nuxt/app.vue

@@ -6,8 +6,12 @@ import src from 'unfonts.css?raw'
 <template>
   <h1>Hello Nuxt!</h1>
   <h2>I'm using a local font !</h2>
+  <div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
+  <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
   <pre>links: {{ links }}</pre>
-  <pre>src: {{ src }}</pre>
+  <ClientOnly>
+    <pre>src: {{ src }}</pre>
+  </ClientOnly>
   <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
 </template>
 
@@ -34,4 +38,12 @@ h2 {
   font-size: 3rem;
   font-weight: 600;
 }
+
+.fontsource-abeezee { 
+  font-family: "ABeeZee", sans-serif;
+}
+
+.fontsource-truculenta { 
+  font-family: "Truculenta", sans-serif;
+}
 </style>

examples/nuxt/nuxt.config.ts

@@ -15,5 +15,19 @@ export default defineNuxtConfig({
         'Dancing Script': './assets/fonts/DancingScript*',
       },
     },
+
+    fontsource: {
+      families: [
+        {
+          name: 'ABeeZee',
+          weights: [400],
+          styles: ['italic'],
+        },
+        {
+          name: 'Truculenta',
+          weights: [400, 700],
+        },
+      ],
+    },
   },
 })

examples/sveltekit/vite.config.ts

@@ -35,7 +35,6 @@ export default defineConfig({
           {
             name: 'Truculenta',
             weights: [400, 700],
-            subset: 'latin-ext',
           },
         ],
       },

examples/vite/vite.config.ts

@@ -33,7 +33,6 @@ export default defineConfig({
           {
             name: 'Truculenta',
             weights: [400, 700],
-            subset: 'latin-ext',
           },
         ],
       },

examples/vitepress/.vitepress/config.ts

@@ -35,7 +35,6 @@ export default defineConfig({
             {
               name: 'Truculenta',
               weights: [400, 700],
-              subset: 'latin-ext',
             },
           ],
         },

src/loaders/custom.ts

@@ -9,6 +9,7 @@ function resolveUserOption(options: CustomFonts): ResolvedCustomFonts {
   let {
     families = [],
     preload = true,
+    prefetchPrefix = '',
     prefetch = false,
     injectTo = 'head-prepend',
     display = 'auto',
@@ -27,6 +28,7 @@ function resolveUserOption(options: CustomFonts): ResolvedCustomFonts {
   return {
     families,
     preload,
+    prefetchPrefix,
     prefetch,
     injectTo,
     display,
@@ -229,7 +231,7 @@ function createFontLinks(options: ResolvedCustomFonts, face: CustomFontFace) {
         rel: options.prefetch ? 'prefetch' : 'preload',
         as: 'font',
         type: `font/${file.ext.replace('.', '')}`,
-        href: file.path,
+        href: join(options.prefetchPrefix, file.path),
         crossorigin: true,
       },
     })

src/loaders/fontsource.ts

@@ -1,6 +1,6 @@
 import type { FontsourceFonts } from '../types'
 
-export function fontsourceVirtualModule(options?: FontsourceFonts) {
+export function fontsourceImports(options?: FontsourceFonts) {
   const source: string[] = []
 
   const {
@@ -13,7 +13,7 @@ export function fontsourceVirtualModule(options?: FontsourceFonts) {
 
     if (typeof family === 'string') {
       const name = family.toLowerCase().replace(/ /g, '-')
-      source.push(`@import "@fontsource/${name}";`)
+      source.push(`@fontsource/${name}/index.css`)
       continue
     }
 
@@ -22,24 +22,30 @@ export function fontsourceVirtualModule(options?: FontsourceFonts) {
 
     if ('variables' in family) {
       for (const variable of family.variables)
-        source.push(`@import "@fontsource/${name}/${subsetPrefix}${variable}.css";`)
+        source.push(`@fontsource/${name}/${subsetPrefix}${variable}.css`)
     }
     else if ('weights' in family) {
       for (const weight of family.weights) {
         if (family.styles) {
           for (const style of family.styles) {
             if (style === 'normal')
-              source.push(`@import "@fontsource/${name}/${subsetPrefix}${weight}.css";`)
+              source.push(`@fontsource/${name}/${subsetPrefix}${weight}.css`)
             else
-              source.push(`@import "@fontsource/${name}/${subsetPrefix}${weight}-${style}.css";`)
+              source.push(`@fontsource/${name}/${subsetPrefix}${weight}-${style}.css`)
           }
         }
         else {
-          source.push(`@import "@fontsource/${name}/${subsetPrefix}${weight}.css";`)
+          source.push(`@fontsource/${name}/${subsetPrefix}${weight}.css`)
         }
       }
     }
   }
 
-  return source.join('\n')
+  return source
+}
+
+export function fontsourceVirtualModule(options?: FontsourceFonts) {
+  return fontsourceImports(options)
+    .map((src) => `@import "${src}";`)
+    .join('\n')
 }

src/nuxt.ts

@@ -4,6 +4,7 @@ import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'
 import type {} from '@nuxt/schema'
 import type { Options } from './types'
 import { getHeadLinkTags } from './loaders'
+import { fontsourceImports } from './loaders/fontsource'
 import unplugin from '.'
 
 export default defineNuxtModule({
@@ -15,6 +16,16 @@ export default defineNuxtModule({
     if ('fontsource' in options || 'custom' in options) {
       nuxt.options.css ||= []
       nuxt.options.css.push('unfonts.css')
+      if ('fontsource' in options) {
+        for (const src of fontsourceImports(options.fontsource)) {
+          nuxt.options.css.push(src)
+        }
+        delete options.fontsource
+      }
+    }
+
+    if (options.custom) {
+      options.custom.prefetchPrefix = nuxt.options.runtimeConfig.app.buildAssetsDir
     }
 
     const links = getHeadLinkTags(options, nuxt.options.rootDir)

src/types.ts

@@ -55,7 +55,6 @@ export interface CustomFontFamily {
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#description
    */
   local?: string | string[]
-
   /**
    * Allows to transform the generated config for any font face.
    *
@@ -97,6 +96,7 @@ export interface CustomFonts {
    * @default false
    */
   prefetch?: boolean
+  prefetchPrefix?: string
   /**
    * @default: 'head-prepend'
    */