Having trouble with fonts not being found on live production

[Rylan Harper]

Hey! Very cool package. I'm using this for an open-source Nuxt project I am working on behind the scenes, but I am running into issues when deploying to live production via Netlify..

Oddly enough, Netlify shows that the fonts are downloaded and cached [success] [@nuxt/fonts] Fonts downloaded and cached., but when I navigate to my site I get the following error:

GET https://yeren.netlify.app/_fonts/-F63fjptAgt5VM-kVkqdyU8n5is-60MhQVXoUT.woff net::ERR_ABORTED 404 (Not Found)
GET https://yeren.netlify.app/_fonts/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o-jzNqqYFBmI.woff2 net::ERR_ABORTED 404 (Not Found)

My nuxt.config looks like this:

modules: [
  '@nuxt/fonts',
],

fonts: {
  families: [
    { name: 'IBM Plex Mono', provider: 'google', weights: [400, 500, 600] },
    { name: 'IBM Plex Sans', provider: 'google', weights: [400, 500, 600] }
  ]
},

Perhaps this is an issue with my config? Any help would be appreciated:)

[dosubot]

Hey @rylanharper! I'm here to help you with any bugs, questions, or becoming a contributor. Let's tackle this font issue together!

The issue with fonts not being found on live production for your Nuxt project deployed via Netlify, despite the build logs indicating successful download and caching, could be due to the configuration of the publicAssets in the nitro options. Specifically, the baseURL for the public assets might not be correctly set or accessible in the production environment.

In the provided code, the baseURL for the fonts is set to assetsBaseURL, which defaults to /_fonts. Ensure that this path is correctly accessible in your production environment and that Netlify is serving these assets correctly.

Here is the relevant part of the code that sets up the public assets:

nuxt.options.nitro = defu(nuxt.options.nitro, {
  publicAssets: [{
    dir: cacheDir,
    maxAge: ONE_YEAR_IN_SECONDS,
    baseURL: assetsBaseURL,
  }],
  ignore: [`!${join(cacheDir, '**/*')}`],
  prerender: {
    ignore: [assetsBaseURL],
  },
} satisfies NitroConfig);

Additionally, ensure that your nuxt.config.ts is correctly set up to handle custom fonts. Here is an example configuration that includes custom fonts:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/fonts', '@nuxtjs/tailwindcss', '@unocss/nuxt'],
  unocss: {
    disableNuxtInlineStyle: false,
  },
  fonts: {
    providers: {
      custom: '~/providers/custom',
    },
    families: [
      { name: 'Abel', provider: 'bunny' },
      { name: 'Satoshi', provider: 'fontshare' },
      { name: 'Kode Mono', provider: 'none' },
      { name: 'MyCustom', src: '/custom-font.woff2' },
      { name: 'CustomGlobal', global: true, src: '/font-global.woff2' },
      { name: 'Oswald', fallbacks: ['Times New Roman'] },
      { name: 'Aleo', provider: 'adobe' },
      { name: 'Barlow Semi Condensed', provider: 'adobe' },
      { name: 'Barlow', preload: true },
      { name: 'Roboto Mono', provider: 'fontsource' },
    ],
    adobe: {
      id: ['sij5ufr', 'grx7wdj'],
    },
    defaults: {
      fallbacks: {
        monospace: ['Tahoma'],
      },
    },
  },
})

Make sure that the assetsBaseURL is correctly set and that Netlify is configured to serve static assets from this path. You might need to check your Netlify configuration to ensure that the _fonts directory is being served correctly ^[1][2].

To continue talking to Dosu, mention @dosu.

[Rylan Harper]

Hmm so I have tried various solutions..

fonts: {
  families: [
    { name: 'IBM Plex Mono', provider: 'google' },
    { name: 'IBM Plex Sans', provider: 'google' }
  ],
  defaults: {
    weights: [400, 500, 600]
  }
}

tailwind.config.ts

import defaultTheme from 'tailwindcss/defaultTheme'
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['IBM Plex Sans', ...defaultTheme.fontFamily.sans],
        mono: ['IBM Plex Mono', ...defaultTheme.fontFamily.mono]
      }
    }
  }
}

This should work, but it simply doesn't and fonts are not downloading/caching correctly..

[Daniel Roe]

The issue is a Nitro/Nuxt bug with files beginning with -. It should be fixed in the latest Nuxt/Nitro versions - can you try updating your lockfile and seeing if the issue reoccurs?

[Rylan Harper]

@danielroe Got it. I am not sure why mono fonts have that dash for the Google provider.. Just to confirm, the font configuration options within my nuxt.config (that I posted above) should download/cache those fonts for production correct? Or do I understand this wrong?

Hmm, unfortunately the problem still occurs when upgrading the latest version of Nuxt (lock file updated as well). Here are the relevant packages in my package.json:

"@nuxt/fonts": "^0.7.0",
"nuxt": "^3.12.1",

[Daniel Roe]

What happens if you pin your Nuxt Kit version?

[Rylan Harper]

I pinned the @nuxt/kit version to 3.12.1 and updated the lock file again.. Same result, the fonts do not download properly on live production..

Here is a StackBlitz of the issue. The error shows up in the dev console, stating that the fonts cannot be downloaded:

ERROR  Could not download google font metadata. @nuxt/fonts will not be able to inject @font-face rules for google.
ERROR  Could not download fontshare font metadata. @nuxt/fonts will not be able to inject @font-face rules for fontshare.

Although, the monospace font is displaying correctly within the StackBlitz environment so idk whats going on. Perhaps this is because I have the specified font downloaded locally (so it shows up when declared for me, but probably wont show up for someone who doesn't have the font on their local machine).

[Rylan Harper]

Hey @danielroe, any update on this? No rush, but I am just checking if I should leave out @nuxt/fonts for the time being and just manually import/download some font styles?

[Rylan Harper]

@danielroe It seems the issue still persists after upgrading to ^0.7.1.. Still seems to be an issue with those mono fonts and having a -. I've updated the Stackblitz to include version ^0.7.1 (still showing errors in the console) 😭

Here is a current screenshot:

And here is the font options within my nuxt.config.ts:

fonts: {
  families: [
    { name: 'IBM Plex Mono', provider: 'google' },
    { name: 'IBM Plex Sans', provider: 'google' }
  ],
  defaults: {
    weights: [400, 500, 600]
  }
}

[Daniel Roe]

Sorry about that! I've resolved and will be releasing shortly.

[Rylan Harper]

No worries man. You and the Nuxt team are doing an amazing job!