`@font-face` not used with `fontshare` provider about fonts HOT 4 OPEN

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.

from fonts.

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.

from fonts.

Would you be able to provide a reproduction? 🙏

from fonts.

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

from fonts.