Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nuxt Fonts not loading in Histoire #240

Closed
davestewart opened this issue Sep 2, 2024 · 2 comments
Closed

Nuxt Fonts not loading in Histoire #240

davestewart opened this issue Sep 2, 2024 · 2 comments
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@davestewart
Copy link

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

image

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?
@dosubot DosuBot
Copy link

dosubot bot commented Sep 2, 2024

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

@danielroe
Copy link
Member

This is an interesting one. nuxt/fonts integrates with nitro to serve font assets and histoire doesn't enable a nitro server at all - we might need a clever way to handle this via a vite plugin 🤔

@danielroe danielroe added bug Something isn't working good first issue Good for newcomers labels Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davestewart @danielroe