Doc unclear how to use it with Unocss

[Celibioux]

Anyone can insight how to use it with Unocss ?

[qwerzl]

Check out the playground:

https://github.com/nuxt/fonts/blob/ecfbb0cc0c4dd370203750dae49f20092955c858/playground/uno.config.js#L3-L9

https://github.com/nuxt/fonts/blob/ecfbb0cc0c4dd370203750dae49f20092955c858/playground/pages/unocss.vue#L2

[Celibioux]

Thank you

[mklueh]

As soon as I pre-define the font families in UnoCSS, it keeps downloading them from gstatic despite having nuxt/font in place.

It turns out, you explicitly have to set the provider in your UnoCSS config to none instead of leaving it out, as it defaults to google

  presetWebFonts({
    /**
     * none - do nothing, treat the font as system font
     * google - Google Fonts
     * bunny - Privacy-Friendly Google Fonts
     * fontshare - Quality Font Service by ITF
     */
    provider: "none",

})

[danielroe]

You should not have that preset in your uno config at all - it is not needed and can conflict with Nuxt Fonts.

[mklueh]

@danielroe If that's the case, the README.md should be refined a bit

Because it reads as if it is perfectly fine to use both together.

I'm using a root UnoCSS config in my monorepo to have consistency across multiple applications and I kind of like that approach. Do you see any chance improving the compatibility of nuxt/fonts with UnoCSS fonts rather than forcing the user to remove one or the other?

Could also be that my approach is not the best and there are better ways to share default configs - nuxt layers for example. But what about non-nuxt apps?

[danielroe]

It's perfectly fine to use Nuxt Fonts with UnoCSS, but Uno's web fonts preset is an alternative to Nuxt Fonts, so that specific preset will conflict.

[mklueh]

I see, thank you

[danielroe]

mentioned in docs here: 627125b79b56188045e9bafb2e656c6c1e161cf7