Nuxt•2mo ago

Nuxt/fonts Local

Hi @kapa.ai I need to know how can add custom local fonts that ara on the public folder in a fonts folder. (public/fonts). The are two families and differents weights

14 Replies

kapa.ai•2mo ago

Hi @Ivan Ortiz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, here's how to add custom local fonts from your public/fonts folder using Nuxt Fonts: Using Local Fonts with Nuxt Fonts Nuxt Fonts has a built-in local provider that automatically scans your public/ directory for font files. Here's how to set it up: 1. Install Nuxt Fonts First, install the module:

npx nuxt module add fonts

npx nuxt module add fonts

Or manually:

npm i @nuxt/fonts

npm i @nuxt/fonts

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts']
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts']
})

2. Organize Your Font Files Place your font files in public/fonts/. The local provider supports ttf, woff, woff2, eot, and otf extensions. Important naming convention: To specify different weights and styles, include that information in the filename. For example: - my-font.woff2 (defaults to 400/normal/latin) - my-font-700.woff2 (bold weight) - my-font-700-italic.woff2 (bold italic) - my-font-bold.woff2 (keywords like light, bold, or black are accepted) 3. Use the Fonts in Your CSS Simply reference the font family in your CSS, and Nuxt Fonts will automatically detect and load it:

div {
  font-family: 'My Font', sans-serif;
}

div {
  font-family: 'My Font', sans-serif;
}

4. Configure Weights (Optional) By default, Nuxt Fonts only loads the normal/400 font-weight. To load multiple weights, configure the defaults:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400, 700],
      styles: ['normal', 'italic']
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400, 700],
      styles: ['normal', 'italic']
    }
  }
})

The local provider will only attempt to load styles and weights that are configured in the Font Options, so make sure your configuration matches the font files you have available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@796711333285855263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Ivan OrtizOP•2mo ago

Hi @kapa.ai this is an example of my declaration on the css: @font-face { font-family: 'TT Supermolot Neue Condensed'; src: url('/fonts/TTSupermolotNeue-CondRegular.woff2') format('woff2'), url('/fonts/TTSupermolotNeue-CondRegular.woff') format('woff'); font-style: normal; font-weight: normal; font-display: swap; } @font-face { font-family: 'TT Supermolot Neue Condensed'; src: url('/fonts/TTSupermolotNeue-CondBold.woff2') format('woff2'), url('/fonts/TTSupermolotNeue-CondBold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: 'TT Supermolot Neue'; src: url('/fonts/TTSupermolotNeue-ExtraBold.woff2') format('woff2'), url('/fonts/TTSupermolotNeue-ExtraBold.woff') format('woff'), url('/fonts/TTSupermolotNeue-ExtraBold.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Regular.woff2') format('woff2'), url('/fonts/Poppins-Regular.woff') format('woff'), url('/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Italic.woff2') format('woff2'), url('/fonts/Poppins-Italic.woff') format('woff'), url('/fonts/Poppins-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; }

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your @font-face declarations, here's how to configure Nuxt Fonts to work with your local fonts: Configuration for Your Fonts 1. Rename Your Font Files To work with Nuxt Fonts' local provider naming convention, rename your files to include weight and style information: TT Supermolot Neue Condensed: - TTSupermolotNeue-CondRegular.woff2 → tt-supermolot-neue-condensed.woff2 (or tt-supermolot-neue-condensed-400.woff2) - TTSupermolotNeue-CondBold.woff2 → tt-supermolot-neue-condensed-700.woff2 TT Supermolot Neue: - TTSupermolotNeue-ExtraBold.woff2 → tt-supermolot-neue-800.woff2 Poppins: - Poppins-Regular.woff2 → poppins.woff2 (or poppins-400.woff2) - Poppins-Italic.woff2 → poppins-italic.woff2 2. Configure Nuxt Fonts In your nuxt.config.ts, configure the weights and styles:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400, 700, 800],
      styles: ['normal', 'italic']
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [400, 700, 800],
      styles: ['normal', 'italic']
    }
  }
})

3. Use the Fonts in Your CSS Remove your manual @font-face declarations and simply use the font families:

h1 {
  font-family: 'TT Supermolot Neue Condensed', sans-serif;
  font-weight: 700;
}

h2 {
  font-family: 'TT Supermolot Neue', sans-serif;
  font-weight: 800;
}

p {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
}

h1 {
  font-family: 'TT Supermolot Neue Condensed', sans-serif;
  font-weight: 700;
}

h2 {
  font-family: 'TT Supermolot Neue', sans-serif;
  font-weight: 800;
}

p {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
}

Nuxt Fonts will automatically generate the @font-face rules and optimize your fonts, including creating fallback metrics to reduce layout shift. Note: The local provider expects hyphenated lowercase filenames. Font family values with spaces and/or caps will look up hyphenated lowercase filenames, so 'TT Supermolot Neue Condensed' will look for tt-supermolot-neue-condensed.woff2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@796711333285855263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Ivan OrtizOP•2mo ago

Thanks for your help. @kapa.ai i want to know if i can at roboto and materiadesign icons from vuetify to this plugins @nuct/fonts

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can add Roboto and Material Design Icons using @nuxt/fonts! Here's how: Adding Roboto Font Roboto is available through Google Fonts provider, which is built into Nuxt Fonts. Simply use it in your CSS:

body {
  font-family: 'Roboto', sans-serif;
}

body {
  font-family: 'Roboto', sans-serif;
}

Nuxt Fonts will automatically detect and load it from Google Fonts. To configure specific weights:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      { 
        name: 'Roboto', 
        provider: 'google',
        weights: [300, 400, 500, 700],
        styles: ['normal', 'italic']
      }
    ]
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      { 
        name: 'Roboto', 
        provider: 'google',
        weights: [300, 400, 500, 700],
        styles: ['normal', 'italic']
      }
    ]
  }
})

Adding Material Design Icons For Material Design Icons, Nuxt Fonts has a googleicons provider that supports Material Symbols and Material Icons:

.icon {
  font-family: 'Material Icons';
}

.icon {
  font-family: 'Material Icons';
}

Or for Material Symbols:

.icon {
  font-family: 'Material Symbols Outlined';
}

.icon {
  font-family: 'Material Symbols Outlined';
}

Configuration Example Here's a complete configuration combining both:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [300, 400, 500, 700],
      styles: ['normal', 'italic']
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [300, 400, 500, 700],
      styles: ['normal', 'italic']
    }
  }
})

This way, you can use both Roboto and Material Design Icons without needing Vuetify's font loading mechanism, and Nuxt Fonts will handle optimization, caching, and fallback generation automatically. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@796711333285855263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Ivan OrtizOP•2mo ago

@kapa.ai and how i convine the previus foonts with the vuetify fonts into @nuxt/fonts

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, here's how to combine your custom local fonts with Roboto and Material Design Icons using Nuxt Fonts: Combined Configuration You can use both local fonts (from your public/fonts folder) and Google Fonts together. Nuxt Fonts' local provider will scan your public/ directory first, then check web providers like Google. 1. Keep Your Local Fonts in public/fonts Keep your custom fonts with the proper naming convention: - tt-supermolot-neue-condensed.woff2 - tt-supermolot-neue-condensed-700.woff2 - tt-supermolot-neue-800.woff2 - poppins.woff2 - poppins-italic.woff2 2. Configure Nuxt Fonts In your nuxt.config.ts, configure both local and Google fonts:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [300, 400, 500, 700, 800],
      styles: ['normal', 'italic']
    },
    families: [
      // Specify that Roboto should come from Google
      { 
        name: 'Roboto', 
        provider: 'google'
      },
      // Material Icons from Google
      { 
        name: 'Material Icons', 
        provider: 'google'
      }
    ]
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    defaults: {
      weights: [300, 400, 500, 700, 800],
      styles: ['normal', 'italic']
    },
    families: [
      // Specify that Roboto should come from Google
      { 
        name: 'Roboto', 
        provider: 'google'
      },
      // Material Icons from Google
      { 
        name: 'Material Icons', 
        provider: 'google'
      }
    ]
  }
})

3. Use All Fonts in Your CSS Now you can use all fonts together:

/* Your custom local fonts */
h1 {
  font-family: 'TT Supermolot Neue Condensed', sans-serif;
}

/* Roboto from Google Fonts */
body {
  font-family: 'Roboto', sans-serif;
}

/* Material Icons */
.icon {
  font-family: 'Material Icons';
}

/* Your custom local fonts */
h1 {
  font-family: 'TT Supermolot Neue Condensed', sans-serif;
}

/* Roboto from Google Fonts */
body {
  font-family: 'Roboto', sans-serif;
}

/* Material Icons */
.icon {
  font-family: 'Material Icons';
}

Nuxt Fonts will automatically resolve fonts by first checking your public/ directory for local fonts, then checking web providers like Google for Roboto and Material Icons. This way, all fonts work together seamlessly with automatic optimization, caching, and fallback generation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@796711333285855263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Ivan OrtizOP•2mo ago

@kapa.ai I need to disable them on my vuetify?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the conversation context, if you want to disable Nuxt Fonts' automatic loading of Roboto and Material Icons so you can use Vuetify's own font loading instead, you have a few options: Option 1: Disable Specific Font Families You can configure specific fonts to not be resolved by Nuxt Fonts using the provider: 'none' option:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      // Prevent Nuxt Fonts from resolving Roboto
      { name: 'Roboto', provider: 'none' },
      // Prevent Nuxt Fonts from resolving Material Icons
      { name: 'Material Icons', provider: 'none' }
    ]
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      // Prevent Nuxt Fonts from resolving Roboto
      { name: 'Roboto', provider: 'none' },
      // Prevent Nuxt Fonts from resolving Material Icons
      { name: 'Material Icons', provider: 'none' }
    ]
  }
})

This tells Nuxt Fonts to ignore these fonts and let Vuetify handle them instead. Option 2: Use Only Local Provider If you only want to use your custom local fonts and disable all web providers, you can specify only the local provider:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    provider: 'local'
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    provider: 'local'
  }
})

Option 3: Disable Specific Providers You can also disable the Google providers while keeping the local provider active:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    providers: {
      google: false,
      googleicons: false
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    providers: {
      google: false,
      googleicons: false
    }
  }
})

This way, your custom local fonts from public/fonts will still work with Nuxt Fonts optimization, but Roboto and Material Icons will be loaded through Vuetify's mechanism instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@796711333285855263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt/fonts Local

Did you find this page helpful?