font-display in nuxt.config.ts not respected

[jmh-zero]

Hello - I have the following in nuxt.config.ts

fonts: {
    families: [
      {
        name: 'My Font',
        provider: 'local',
        weights: ['200', '300', '400', '500', '600', '700', '800', '900'],
        display: 'optional',
      },
    ],
  }

When I inspect the @font-face created in the style section of my document, I can see font-display: swap. I'm on version 0.11.3.

[mtzrmzia]

@jmh-zero did you solved it? i'm facing the same issue

[jmh-zero]

@mtzrmzia I ended up abandoning nuxt fonts and writing my own logic using https://unhead.unjs.io/, which is shipped with Nuxt.

[maxarias-io]

@jmh-zero mind sharing your logic?

[ianjamieson]

I am getting the same issue with my adobe provider defaulting to font-display: auto and not adhering to the swap value set in my config:

fonts: {
    families: [
      { display: 'swap', name: 'Aktiv Grotesk Extended', provider: 'adobe', weights: ['400', '600', '700', '900'] },
    ],
    adobe: {
      id: ['removed'],
    },
  },

I posted a question in the discord server as well

[jmh-zero]

@maxarias-io All nuxt fonts is doing is injecting @fontFace into your styling by using some conventions (e.g. how handle google fonts vs self hosted fonts). My code is just a composable with useHead that injects a css @fontFace inside of a style tag. I call this composable in app.vue. I'd share the code here but it's part of a larger theming engine built into my app so it's hard to extract. Just start by inspecting your sources, copy out the font styles you need and then just tweak them to what you expect with useHead.

I'm sure there are other ways, but this works for me.