Nuxt Fonts not loading in Histoire

We upgraded a few weeks ago to Nuxt Fonts from Nuxt Google Fonts but noticed today our Google fonts are not served in Histoire:

Failed to decode downloaded font:

http://localhost:6006/_fonts/RLpWK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LEW8siGqWZ-w-hYuQIDRE3D.woff2

The Network response is actually HTML, and the Histoire index page itself:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/@vite/client"></script>

    <title></title>
    <link rel="icon" href=""/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="">

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/@fs/Volumes/Data/Work/Clients/Forgd/forgd/node_modules/@histoire/app/dist/bundle-main.js"></script>
  </body>
</html>

This is the change in requests from package to package:

// before, served from here:
http://localhost:6006/node_modules/.cache/nuxt-google-fonts/fonts/Sora-300-12.woff2

// after, server from here:
http://localhost:6006/_fonts/aFTU7PB1QTsUX8KYthqQBK6PYK0-hqxt3dDpcK.woff2

The only other special thing is that our project uses NX as a monorepo.

Any ideas?

Hey there, @davestewart! I'm here to help you out with any bugs, questions, or becoming a contributor! Let's dig into this issue together and figure out what's going on. 🤖

The issue with Google fonts not loading in Histoire after upgrading to Nuxt Fonts, resulting in "Failed to decode downloaded font" errors, is likely due to the way Nuxt Fonts processes and serves the fonts. Here are some steps to resolve this issue:

Check Font Resolution: Ensure that Nuxt Fonts is correctly resolving the fonts from Google Fonts. It should look for font files in your public/ directory and then move on to web font providers like Google Fonts.
Verify @font-face Rules: Nuxt Fonts should automatically generate and inject @font-face rules into your CSS. Verify that these rules are correctly pointing to the right source files.
Proxy and Cache Font Requests: Nuxt Fonts proxies and caches font requests under the /_fonts subpath. Ensure that these requests are being correctly handled and that the fonts are being cached locally.
Include Fonts in Build: When you build your project, Nuxt Fonts should copy all the fonts used in your project and serve them with long-lived cache headers. Verify that the fonts are included in the build and served correctly.

Additionally, ensure that the font metadata is correctly fetched and cached. The fontsource.ts provider in Nuxt Fonts fetches font metadata and details from the Fontsource API. If there are issues with fetching this metadata, it could lead to problems with font loading. Here is a snippet from the fontsource.ts provider that shows how font metadata is fetched and cached:

import { hash } from 'ohash'
import { cachedData } from '../cache'
import { $fetch } from '../fetch'
import { logger } from '../logger'

const fontAPI = $fetch.create({
  baseURL: 'https://api.fontsource.org/v1',
})

async function initialiseFontMeta() {
  const fonts = await cachedData('fontsource:meta.json', () => fontAPI('/fonts', { responseType: 'json' }), {
    onError() {
      logger.error('Could not download `fontsource` font metadata. `@nuxt/fonts` will not be able to inject `@font-face` rules for fontsource.')
      return {}
    },
  })
  // Additional initialization logic...
}

async function getFontDetails(family, variants) {
  const fontDetail = await fontAPI(`/fonts/${family}`, { responseType: 'json' })
  // Process and return font details...
}

By ensuring that these steps are correctly implemented and that the font metadata is properly fetched and cached, you should be able to resolve the font decoding errors ^[1]^[2]^[3].

Additionally, there is a similar open issue regarding fonts not loading correctly, which might provide further insights: Adding fonts like "Quiksand" and "Urbanist" fails ^[4].

To continue talking to Dosu, mention @dosu.

nuxt / fonts

Nuxt Fonts not loading in Histoire #240