N
Nuxt•2mo ago
ianjamieson

nuxt/fonts - font-display:auto/swap for Adobe

I am looking for some guidance on the nuxt/fonts module. I have these versions: 
"@nuxt/fonts": "^0.11.0",
"nuxt": "^4.1.2",
"@nuxt/fonts": "^0.11.0",
"nuxt": "^4.1.2",
And this config: 
fonts: {
    families: [
        ...etc
    ],
    adobe: {
      id: ['removed'],
    },
  },
fonts: {
    families: [
        ...etc
    ],
    adobe: {
      id: ['removed'],
    },
  },
And when I look at my font-face definitions I can only see font-display:auto; My question, how can I set this to swap? I note in the basic tests: https://github.com/nuxt/fonts/blob/92337090c7f5d2ed5606dd9525e0c0970f8e42a9/test/basic.test.ts#L21-L35 That adobe provider will render as font-display:auto, but any other provider would have the swap value, is there a reason for this?
GitHub
fonts/test/basic.test.ts at 92337090c7f5d2ed5606dd9525e0c0970f8e42a...
Plug-and-play web font optimization and configuration for Nuxt apps. - nuxt/fonts
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @ianjamieson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, the Nuxt Fonts module automatically generates and injects @font-face rules for fonts from various providers, including Adobe Fonts. For most providers, the generated CSS uses font-display: swap; to optimize performance and reduce layout shift. However, for the Adobe provider, the generated CSS uses font-display: auto; instead. The reason for this difference is not explicitly documented in the official Nuxt Fonts documentation. The sources confirm that provider-specific options can be set in your Nuxt config, but there is no mention of a configuration option to override the font-display property for the Adobe provider specifically. The documentation also notes that some features (like non-latin subsets) are limited for Adobe due to the lack of a public API, which may also affect how other font-face properties are handled, but it does not provide a direct explanation or workaround for the font-display value for Adobe fontsAdobe provider docs. In summary, according to the available documentation, there is currently no documented way to change the font-display property from auto to swap for the Adobe provider in Nuxt Fonts. This appears to be a limitation or a design choice in the module, as also reflected in the test you referenced. If this behavior is critical for your project, you may consider opening an issue or feature request on the Nuxt Fonts GitHub repository to ask for support for customizing font-display for the Adobe provider. I'm sorry, but the knowledge sources do not contain information about a workaround or configuration to set font-display: swap for Adobe fonts in Nuxt Fonts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@665452065522188297> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ianjamieson
ianjamiesonOP•2mo ago
I am also experiencing this issue https://github.com/nuxt/fonts/issues/634 When trying to set the display value.
GitHub
font-display in nuxt.config.ts not respected · Issue #634 · nuxt/...
Hello - I have the following in nuxt.config.ts fonts: { families: [ { name: &#39;My Font&#39;, provider: &#39;local&#39;, weights: [&#39;200&#39;, &#39;300&#39;, &#39;400&#39;, &#39;500&#39;, &#39;...

Did you find this page helpful?