---------------------- To use the Urbanist font in your layout after setting it up with the `@nuxtjs/google-fonts` module, you have a couple of options: 1. Using Tailwind CSS (if you're using Tailwind): If you've already configured Urbanist as your default sans-serif font in your Tailwind configuration as mentioned earlier, you can simply use Tailwind's font classes in your layout. For example: ```vue ``` The `font-sans` class will automatically use Urbanist as it's now your default sans-serif font. 2. Using CSS: If you're not using Tailwind or want more specific control, you can apply the font directly in your layout's ` ``` This will apply the Urbanist font to the entire body of your layout. 3. Using Nuxt's `app.config.ts`: For a more global approach, you can set the font in your `app.config.ts` file, which allows you to configure UI settings across your entire Nuxt application: ```typescript // app.config.ts export default defineAppConfig({ ui: { fontFamily: { sans: ['Urbanist', 'sans-serif'], }, }, }) ``` This method is based on the **Nuxt UI documentation on theming** (), which shows how to configure global UI settings. After setting it in `app.config.ts`, the Urbanist font will be applied globally, and you don't need to specify it in each layout or component. Remember, the `@nuxtjs/google-fonts` module handles the font loading for you, so you don't need to import the font files manually in your layout. You just need to use the font name in your CSS or Tailwind classes.

How do I add font files in Nuxt?

Similar Threads

Similar Threads

Similar Threads