Nuxt•2mo ago

Nuxt UI fonts not generating fallback fonts

I have my font defined as:

@theme {
   --font-figtree: 'Figtree', "sans-serif";
}

@theme {
   --font-figtree: 'Figtree', "sans-serif";
}

Which is then imported into my main css: @import "./theme/typography.css"; When I run yarn build/start I see no fallback fonts are generated. To test it out I also installed @nuxtjs/fontaine to try it out and that DOES generate fallback fonts, but it generates like 120 rules 🙃 Any ideas?

16 Replies

kapa.ai•2mo ago

Hi @hiimmox. 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 knowledge sources, I can help you understand why fallback fonts aren't being generated in your Nuxt UI setup. According to the Nuxt Fonts documentation, Nuxt Fonts automatically creates font fallback metrics when it has access to font metrics (ascent, descent, line gap, character width, etc.). The fallback generation works by "morphing" a local system font to match the web font's metrics to decrease layout shift. However, there's an important detail about how you should define fonts with Nuxt Fonts. Based on the usage documentation, when using Tailwind CSS v4 with the @theme directive, you should define your font like this:

@theme {
  --font-figtree: "Figtree", "sans-serif";
}

@theme {
  --font-figtree: "Figtree", "sans-serif";
}

The key issue is that Nuxt Fonts only generates CSS for the first font in a font-family declaration. The subsequent fonts in the list (like "sans-serif") are used to generate metrics for font fallbacks. Here are a few things to check: 1. Ensure @nuxt/fonts is properly installed: According to the Nuxt UI Fonts integration docs, Nuxt UI automatically registers the @nuxt/fonts module, so it should work out of the box. 2. Font resolution: Nuxt Fonts needs to be able to resolve your font. It looks for fonts in your public/ directory first, then checks web providers like Google, Bunny, and Fontshare. Make sure "Figtree" is available through one of these sources. 3. CSS Variable Processing: If you're using Tailwind v4, note that as of v0.11.0 and later, you no longer need to set processCSSVariables to true according to the configuration docs. If fallback fonts still aren't generating, it's possible that Nuxt Fonts cannot access the font metrics for "Figtree", which are required for fallback generation. The @nuxtjs/fontaine module you tested generates many rules because it creates comprehensive fallback metrics, which is actually the expected behavior for proper font optimization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@327193365797928963> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

hiimmoxOP•2mo ago

Yep, I dont have "processCSSVariables" installed. Why would it generate so many font faces for the fallback? its bloating my inlined css @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I can explain why @nuxtjs/fontaine generates many @font-face rules for fallbacks. According to the Nuxt Fonts advanced documentation, when Nuxt Fonts generates fallback metrics, it creates multiple @font-face declarations to cover different unicode ranges and font weights. The documentation shows an example:

@font-face {
  font-family: 'Poppins';
  src: local("Poppins"), url("/_fonts/<hash>.woff2") format(woff2);
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131, /* ... */;
  font-weight: 400;
  font-style: normal;
}
/* ... plus more font-face declarations for other unicode ranges/weights */

@font-face {
  font-family: 'Poppins';
  src: local("Poppins"), url("/_fonts/<hash>.woff2") format(woff2);
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131, /* ... */;
  font-weight: 400;
  font-style: normal;
}
/* ... plus more font-face declarations for other unicode ranges/weights */

The multiple rules are generated to properly cover different character sets (unicode ranges) and font variations (weights, styles). This is actually the correct and expected behavior for comprehensive font optimization. However, if you want to reduce the number of generated rules, you can configure the font options in your nuxt.config.ts. According to the configuration documentation, you can limit the weights, styles, and subsets:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400], // Only load specific weights you need
      styles: ['normal'], // Only load specific styles
      subsets: ['latin'] // Only load specific subsets instead of all
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400], // Only load specific weights you need
      styles: ['normal'], // Only load specific styles
      subsets: ['latin'] // Only load specific subsets instead of all
    }
  }
})

By limiting the weights, styles, and especially subsets to only what you actually need in your application, you can significantly reduce the number of generated @font-face rules and the size of your inlined CSS. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@327193365797928963> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dario•2mo ago

Hey, @hiimmox, To fix it, you can explicitly define the font using @font-face and then reference your variable.

hiimmoxOP•2mo ago

Do you mean the font family? Nuxt ui/fonts generates the font-faces from google and all that eg:

'fonts': {
    assets: {
      // The baseURL where font files are served.
      prefix: '/_fonts/',
    },
    families: [
      {
        name: 'Figtree',
        provider: 'google',
        global: true,
        weights: [400, 450, 500, 600, 700],
        display: 'swap',
        styles: ['normal'],
        subsets: ['latin'],
      },
]
}

'fonts': {
    assets: {
      // The baseURL where font files are served.
      prefix: '/_fonts/',
    },
    families: [
      {
        name: 'Figtree',
        provider: 'google',
        global: true,
        weights: [400, 450, 500, 600, 700],
        display: 'swap',
        styles: ['normal'],
        subsets: ['latin'],
      },
]
}

Turns into

@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:url(../_fonts/b2KzQ4rli8Sn4rrdmP-6ktnjfO1HfbhSfgv_27RG7Wg-c4x_wLZ0GBFJ_dgQOHu52lEC96Q51ZyqkU5VgUNmVjg.woff2) format(woff2);unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:no
...
etc

@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:url(../_fonts/b2KzQ4rli8Sn4rrdmP-6ktnjfO1HfbhSfgv_27RG7Wg-c4x_wLZ0GBFJ_dgQOHu52lEC96Q51ZyqkU5VgUNmVjg.woff2) format(woff2);unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:no
...
etc

I also already have this in my main.css, to set some defaults:

@layer base {
  /* Default global styles */
  body {
    font-family: var(--font-figtree);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
...

@layer base {
  /* Default global styles */
  body {
    font-family: var(--font-figtree);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
...

Doesnt seem to pick it up either No luck removing the "@layer base" No luck with:

body {
  font-family: Figtree, sans-serif;

body {
  font-family: Figtree, sans-serif;

dario•2mo ago

Hmm, interesting. It might be a CSS order issue. The generated font-face from @nuxt/ui/fonts could be loading after your main.css, so your --font-figtree variable isn’t being applied yet. Try importing your global styles in app.vue after the UI layer. @layer base, components, utilities; Try this first and let me know if it's no use

hiimmoxOP•2mo ago

for reference, here's how its structured rn:

@import 'tailwindcss';
@import '@nuxt/ui';
@import './theme.css';
@import './nuxtui.theme.css';

@import 'tailwindcss';
@import '@nuxt/ui';
@import './theme.css';
@import './nuxtui.theme.css';

"theme.css" imports various files (typographies, colors, etc) "nuxtui.theme.css" is some nuxt ui var overrides ---

hiimmoxOP•2mo ago

Yeah. no luck moving theme.css above nuxt/ui. Unless I misunderstood? Also one thing I noticed, in the playground examples for tailwind v4 it's still using tailwind.config.js. Maybe thats why its picking it up there? https://stackblitz.com/github/nuxt/fonts/tree/main/playgrounds/tailwindcss@4?file=tailwind.config.js EDIT: Meh, adding it didnt help.

StackBlitz

Nuxt - Fonts - StackBlitz

Plug-and-play web font optimization and configuration for Nuxt apps.

dario•2mo ago

Oh can you share the files? only necessary files so that I can debug?

hiimmoxOP•2mo ago

Sure, gimme one sec, ty!

hiimmoxOP•2mo ago

Probably a bit overkill, font family declaration is in theme/typography.css main.css is imported in nuxt.config:

'css': [
    '@/assets/css/main.css',
  ],

'css': [
    '@/assets/css/main.css',
  ],

tmp.zip

hiimmoxOP•2mo ago

Thanks again 🙂

dario•2mo ago

hiimmoxOP•2mo ago

Hey, GM

Gaming

Programming

Nuxt UI fonts not generating fallback fonts

Did you find this page helpful?