Skip to content

Custom font provider only preloads first weight when font family has multiple weights #771

@mateusmcordeiro

Description

@mateusmcordeiro
## Description

When using a custom font provider with multiple font files for different weights of the same font family, only the first weight is preloaded. The subsequent weights are ignored even though `preload: true` is set.

### Environment

- `@nuxt/fonts` version: "^0.13.0"
- Nuxt version: "^4.2.1"

### Configuration

**`nuxt.config.ts`**
```typescript
fonts: {
  providers: {
    custom: '@/providers/fontProvider.ts'
  },
  families: [
    { name: 'Inter', provider: 'custom', preload: true },
    { name: 'Matter SQ', provider: 'custom', preload: true },
    { name: 'Matter', provider: 'custom', preload: false }
  ],
  experimental: {
    processCSSVariables: true
  }
}

fontProvider.ts

'Matter SQ': [
  {
    src: [{ url: '/fonts/matter-sq/MatterSQ-Light.woff2', format: 'woff2' }],
    weight: 300,
    style: 'normal',
    display: 'swap'
  },
  {
    src: [{ url: '/fonts/matter-sq/MatterSQ-Regular.woff2', format: 'woff2' }],
    weight: 400,
    style: 'normal',
    display: 'swap'
  }
]

Current behavior

Only the first font weight (300) is preloaded:

<link rel="preload" as="font" crossorigin="" href="/fonts/Inter-4.1/web/InterVariable-subset.woff2">
<link rel="preload" as="font" crossorigin="" href="/fonts/matter-sq/MatterSQ-Light.woff2">

Expected behavior

All font weights returned by the provider should be preloaded:

<link rel="preload" as="font" crossorigin="" href="/fonts/Inter-4.1/web/InterVariable-subset.woff2">
<link rel="preload" as="font" crossorigin="" href="/fonts/matter-sq/MatterSQ-Light.woff2">
<link rel="preload" as="font" crossorigin="" href="/fonts/matter-sq/MatterSQ-Regular.woff2">

Additional context

  • The @font-face rules are generated correctly for all weights
  • Only the preload behavior is affected
  • I also tried using the weights option (weights: [300, 400]) but it didn't change the behavior

Workaround

Currently using manual preload links in app.head.link as a workaround:

app: {
  head: {
    link: [
      {
        rel: 'preload',
        href: '/fonts/matter-sq/MatterSQ-Light.woff2',
        as: 'font',
        type: 'font/woff2',
        crossorigin: 'anonymous'
      },
      {
        rel: 'preload',
        href: '/fonts/matter-sq/MatterSQ-Regular.woff2',
        as: 'font',
        type: 'font/woff2',
        crossorigin: 'anonymous'
      }
    ]
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions