Open samk-dev opened 6 days ago
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.
Would you be able to provide a reproduction? 🙏
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
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:
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."
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.
Verify Font Metadata Initialization:
initialiseFontMeta
function completes successfully without errors.families
set is correctly populated with the font names.Ensure Correct Font Face Generation:
resolveFontFaceWithOverride
function is correctly handling font family overrides.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.
I am using the module with
fontshare
as a provider. When checkingpageInsights
it shows that@font-face
is not being used. When addingfontain
module it resolves the issue.when using
fontain
Darwin
v20.14.0
3.12.2
3.12.0
2.9.6
npm@10.7.0
-
devtools
,future
,modules
,runtimeConfig
,app
,routeRules
,devServer
,build
,fonts
,tailwindcss
@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
-