`@font-face` not used with `fontshare` provider

[samk-dev]

I am using the module with fontshare as a provider. When checking pageInsights it shows that @font-face is not being used. When adding fontain module it resolves the issue.

when using fontain

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: npm@10.7.0
• Builder: -
• User Config: devtools, future, modules, runtimeConfig, app, routeRules, devServer, build, fonts, tailwindcss
• Runtime Modules: @nuxt/eslint@0.3.13, @nuxtjs/tailwindcss@6.12.0, @nuxt/image@1.7.0, @nuxt/fonts@0.7.0, @nuxtjs/fontaine@0.4.3
• Build Modules: -

[dosubot]

Hey there, @samk-dev! I'm here to help you with any bugs, questions, or contributions you might have. Let's tackle this issue together!

To ensure that @font-face is being used correctly with fontshare without needing to add the fontain module, you can verify that the inlined font face rules are generated correctly for the fontshare provider. The test case provided in the repository demonstrates this:

it('generates inlined font face rules for `fontshare` provider', async () => {
    const html = await $fetch<string>('/providers/fontshare')
    expect(extractFontFaces('Satoshi', html)).toMatchInlineSnapshot(`
      [
        "@font-face{font-family:Satoshi;src:local("Satoshi Regular"),local("Satoshi"),url(/_fonts/file.woff2) format(woff2),url(/_fonts/file.woff) format(woff),url(/_fonts/file.ttf) format(truetype);font-display:swap;font-weight:400;font-style:normal}",
      ]
    `)
  })

This test ensures that the @font-face rules for the Satoshi font from the fontshare provider are correctly inlined in the HTML. If this test passes, it indicates that @font-face is being used correctly with fontshare ^[1].

Additionally, the src/module.ts file outlines the implementation details for fetching and resolving font metadata from various providers, including fontshare. The module hooks into the Nuxt lifecycle to register and set up providers, ensuring that the correct font face rules are generated and cached. This includes functions like resolveFontFaceWithOverride to handle font face resolution and setupPublicAssetStrategy to manage public assets ^[2].

By ensuring that these functions are correctly implemented and the test case passes, you can be confident that @font-face is being used correctly with fontshare.

To continue talking to Dosu, mention @dosu.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/fonts/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[samk-dev]

Hey Daniel, here's a reproduction. reproduction I haven't tested if the issue persists after the released of an update to the module 2h ago. Let me know if you need me test anything else on my end.

Thanks

[dosubot]

To address the issue with @font-face not being used with the fontshare provider, ensure that the font metadata is properly initialized and that there are no errors in downloading the font metadata from Fontshare. Here are the steps to verify and resolve the issue:

1. Check Logs for Errors: Ensure that there are no errors logged during the initialization of font metadata. Look for messages like "Could not download fontshare font metadata. @nuxt/fonts will not be able to inject @font-face rules for fontshare."

2. Update to the Latest Version: Make sure you are using the latest version of the @nuxt/fonts module, as recent updates include several fixes and improvements related to font face handling.

3. Verify Font Metadata Initialization:

   • Ensure that the initialiseFontMeta function completes successfully without errors.
   • Check that the families set is correctly populated with the font names.

4. Ensure Correct Font Face Generation:

   • Verify that the resolveFontFaceWithOverride function is correctly handling font family overrides.
   • Ensure that the generateFontFace function is properly generating the @font-face rules.

Here is a snippet of the relevant code for initializing font metadata and generating @font-face rules:

async function initialiseFontMeta() {
  fonts = await cachedData('fontshare:meta.json', async () => {
    const fonts: FontshareFontMeta[] = []
    let offset = 0
    let chunk
    do {
      chunk = await fontAPI<{ fonts: FontshareFontMeta[], has_more: boolean }>('/fonts', {
        responseType: 'json',
        query: {
          offset,
          limit: 100,
        },
      })
      fonts.push(...chunk.fonts)
      offset++
    } while (chunk.has_more)
    return fonts
  }, {
    onError() {
      logger.error('Could not download `fontshare` font metadata. `@nuxt/fonts` will not be able to inject `@font-face` rules for fontshare.')
      return []
    },
  })
  for (const font of fonts) {
    families.add(font.name)
  }
}

If the issue persists, you can also try adding the fontain module, which helps in generating the @font-face declarations correctly by resolving font faces and normalizing font data ^[1][2][3].

Please test these steps and let me know if the issue is resolved or if further assistance is needed.

To continue talking to Dosu, mention @dosu.

[danielroe]

@samk-dev checking this out, it seems the problem is that you aren't using the font anywhere in your app. So by adding the CSS + specifying it should be preloaded, you're asking the browser to add a preload for a font that isn't needed. Maybe I'm misunderstanding - so please do let me know more details and I'll happily reopen.