Comments (4)
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:
-
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:
- Ensure that the
initialiseFontMeta
function completes successfully without errors. - Check that the
families
set is correctly populated with the font names.
- Ensure that the
-
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.
- Verify that the
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? 🙏
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:
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.
Related Issues (20)
- The `local` provider does not perform font metric optimization HOT 2
- Docs(?): Explicitly state that only the first font specified in a rule is used HOT 1
- DX: Document or improve variable font behaviour
- Having trouble with fonts not being found on live production HOT 12
- Font not loading when upgrading to nuxt 3.12.1 and enabling `compatibilityVersion: 4` HOT 3
- Local variable Font not working HOT 3
- `unicodeRange` override is ignored in generated CSS HOT 3
- Loading fonts causes flickering in dev mode HOT 6
- Adobe doesn't load HOT 7
- bug: fontsource variable weight HOT 1
- Question: How to fetch only woff2 format? HOT 7
- Woff2 font priority HOT 1
- Not loading any custom fallback fonts HOT 2
- [Question] Can the module detect font weights automatically? HOT 4
- Allow option to prevent local source or lower priority of local source
- Problems with Adobe as provider HOT 6
- Extension priority is not respected by the local provider HOT 1
- cdnURL is not respected by google provider HOT 1
- Why use public folder over assets folder HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fonts.