Nuxt•2mo ago

Nuxt UI / Nuxt Fonts generating duplicate font-face rules

"@nuxt/ui": "^4.0.0",

Here's my config:

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

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

Looking at my entry bundle, I see pairs of @font-faces like this:

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 400;
    src: local("Figtree Regular"), local("Figtree"), 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: normal;
    font-weight: 400;
    src: local("Figtree Regular"), local("Figtree"), url(../_fonts/k6j79xSGN8FYfejp8VjGOXPQgEY6h-YwDrvm2WeP4Hs-D0bjUcsJ3zB1_YhVwWXkqewyr_UmDfY4f59Vz1ZaRgY.woff2) format(woff2);
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 400;
    src: local("Figtree Regular"), local("Figtree"), 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: normal;
    font-weight: 400;
    src: local("Figtree Regular"), local("Figtree"), url(../_fonts/k6j79xSGN8FYfejp8VjGOXPQgEY6h-YwDrvm2WeP4Hs-D0bjUcsJ3zB1_YhVwWXkqewyr_UmDfY4f59Vz1ZaRgY.woff2) format(woff2);
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

Any idea?

3 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: ---------------------- The duplicate @font-face rules you are seeing are expected behavior when using Nuxt Fonts with providers like Google Fonts. Nuxt Fonts generates multiple @font-face rules for the same font, weight, and style, but with different unicode-range values. This is how Google Fonts (and other providers) optimize font loading: by splitting the font files into subsets for different Unicode ranges, browsers only download the subset they need for the characters on the page. This reduces the overall font payload and improves performance. For example, you might see two (or more) @font-face rules for Figtree at weight 400, each with a different unicode-range and a different .woff2 file. This is not a bug or a misconfiguration—it's an intentional optimization. From the Nuxt Fonts documentation:

We'll generate rules to point your browser to the right source files. They'll be injected into the same CSS where you use the font-family... plus more font-face declarations for other unicode ranges/weights

[Nuxt Fonts processes all your CSS and does the following things automatically when it encounters a font-family declaration...]

1. Generates and injects @font-face rules for you. We'll generate rules to point your browser to the right source files. They'll be injected into the same CSS where you use the font-family. 2. Proxies and caches font requests. Rather than using the original source URLs (to remote servers), we generate rewrites under the /_fonts subpath. When accessed by your browser, we download the font from the remote server and cache it locally. 3. Include fonts in build. When you build your project, we'll copy across all the fonts used in your project so you don't need to make any external requests when loading your site. (Any that haven't already been cached in development are downloaded at build time.) Font file names are hashed and Nuxt will serve them with long-lived cache headers.

Read more

So, unless you are seeing truly identical @font-face rules (same unicode-range, same src), this is normal and beneficial. If you are seeing exact duplicates (not just different unicode ranges), that could indicate a bug, but based on your example, this is standard font subsetting behavior and not an error. If you want to further customize or reduce the number of subsets, you can adjust the subsets option in your config, but for most use cases, the default behavior is optimal for performance and compatibility. How Nuxt Fonts works ---------------------- 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

TIL!

Gaming

Programming

Nuxt UI / Nuxt Fonts generating duplicate font-face rules

Did you find this page helpful?