Replies: 13 comments 5 replies
-
Awesome!. I am particularly excited about this one. I hope variable fonts would work out of the box. I also think fontsource should be part of the providers supported out of the box |
Beta Was this translation helpful? Give feedback.
-
Yes and Yes |
Beta Was this translation helpful? Give feedback.
-
To confirm my understanding that this is will be out of the box with no modules installation needed? I just need to set the |
Beta Was this translation helpful? Give feedback.
-
Could we have something similar to the |
Beta Was this translation helpful? Give feedback.
-
Not sure about all the benefits of base64 but this one may be useful to some people? 🤔 |
Beta Was this translation helpful? Give feedback.
-
Nice! looks like https://github.com/nuxt-modules/fontaine can also benefit from this |
Beta Was this translation helpful? Give feedback.
-
This is just what I need for a project I'm working on! |
Beta Was this translation helpful? Give feedback.
-
Really looking forward to see this integration into nuxt core. I have been using the NextJS implementation of this and its such a joy to work with. Being able to load fonts dynamically or locally, specify a variable name, and then import it not having to think about it anymore |
Beta Was this translation helpful? Give feedback.
-
I started working on the module |
Beta Was this translation helpful? Give feedback.
-
does it support work with nuxt/i18n ? |
Beta Was this translation helpful? Give feedback.
-
Linking the now existing package - https://github.com/nuxt/fonts |
Beta Was this translation helpful? Give feedback.
-
Question about Adobe Font licensing (and potentially other providers) On Adobe Font licensing they answer this question:
On the @nuxtjs/fonts README.md it says:
Isn't this process a violation of Adobe's licensing? |
Beta Was this translation helpful? Give feedback.
-
how do i set a font globally? im using nuxt3 and i'm using a font i downloaded. i added it to nuxt.config.js and modified my tailwind config file, but i still have to apply it manually in a css class on each file for it to take effect. |
Beta Was this translation helpful? Give feedback.
-
Nuxt Fonts RFC
Summary
The
nuxt/fonts
integration is a new addition to the Nuxt framework that allows developers to easily configure fonts in their Nuxt apps (whether system or web fonts). This is relevant directly for end users as well as modules (like@nuxtjs/tailwindcss
or@nuxtjs/vuetify
).Implementation
nuxt/fonts
integrates with the Nuxt Assets RFC to automatically download fonts and font CSS as required as part of the build process. It also automatically generates CSS to reduce layout shift and adds prefetch/preload/dns-preconnect hints as required.Providers
Different providers are available to handle the loading of web fonts. Out-of-the-box,
nuxt/fonts
will ship withlocal
andgoogle
providers, with PRs accepted to add more to core, though modules will also be able to register their own providers.Providers will be passed font family definitions specified in the configuration and will be able to handle registering assets using Nuxt Assets (see RFC) as well as inject CSS globally or per-use.
Inspirations: https://unocss.dev/presets/web-fonts#providers
API
In most cases,
nuxt/fonts
will be able to detect your font usage and optimise your fonts automatically throughout your app without any explicit configuration.However, it will be possible to specify fonts and/or default providers to be used in your app using a new top-level
fonts
configuration option within yournuxt.config
, specifying the available fonts within your app.Inspirations: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
Beta Was this translation helpful? Give feedback.
All reactions