Overview
Nuxt UI automatically integrates @nuxt/fonts to provide optimized font loading and management. The module handles font optimization, local font loading, and web font providers.
Automatic Integration
The @nuxt/fonts module is automatically installed and configured by Nuxt UI:
// Automatically configured by Nuxt UI
{
fonts: {
defaults: {
weights: [400, 500, 600, 700]
}
}
}
Font integration is enabled by default. You can disable it by setting fonts: false in your Nuxt UI configuration.
Default Font Weights
Nuxt UI pre-configures common font weights used throughout the component library:
- 400 - Regular text
- 500 - Medium emphasis
- 600 - Semibold headings
- 700 - Bold elements
Using System Fonts
By default, Nuxt UI uses system font stacks for optimal performance:
font-family: ui-sans-serif, system-ui, sans-serif;
Custom Fonts
Google Fonts
Add Google Fonts to your application:
Configure in nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
fonts: {
families: [
{ name: 'Inter', provider: 'google' }
]
}
})
Apply in CSS
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
Local Fonts
Use local font files for better performance and privacy:
Add font files
Place your font files in the public/fonts directory:public/fonts/MyFont-Regular.woff2
public/fonts/MyFont-Bold.woff2
Configure local fonts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
fonts: {
families: [
{
name: 'MyFont',
provider: 'local',
weights: [400, 700]
}
]
}
})
Apply the font
body {
font-family: 'MyFont', sans-serif;
}
Font Display Strategy
Optimize font loading behavior:
export default defineNuxtConfig({
fonts: {
defaults: {
weights: [400, 500, 600, 700],
fallbacks: {
'sans-serif': ['system-ui', 'Arial']
}
}
}
})
{
fonts: {
defaults: {
styles: ['normal'],
display: 'swap'
}
}
}
Variable Fonts
Use variable fonts for greater flexibility:
export default defineNuxtConfig({
fonts: {
families: [
{
name: 'Inter Variable',
provider: 'google',
variable: true
}
]
}
})
Disabling Font Module
If you prefer to manage fonts manually, disable the automatic integration:
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
fonts: false
}
})
Tailwind Typography
Combine custom fonts with Tailwind’s typography plugin for content-rich pages:
export default {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace']
}
}
}
}
Best Practices
Limit font weights
Only load the font weights you actually use to reduce bundle size.
Use variable fonts
Variable fonts provide all weights in a single file, improving performance.
Preload critical fonts
Preload fonts used above the fold for faster initial rendering.
Provide fallbacks
Always specify fallback fonts that match your custom font’s metrics.
@nuxt/fonts module automatically:
- Optimizes font loading with
font-display: swap
- Generates local fallback fonts
- Prefetches font resources
- Provides type-safe font configuration
Avoid loading too many font weights or styles, as this increases page load time and negatively impacts performance.
Learn More