Design Converter
Education
Last updated on Feb 18, 2025
•5 mins read
Last updated on Feb 18, 2025
•5 mins read
Want better performance and smoother fonts in your Next.js app?
Many developers use Google Fonts, but loading them from an external source can slow things down. Local fonts give you more control, reduce external requests, and improve visual stability.
With Next.js local fonts, you can manage custom fonts easily, speed up rendering, and reduce layout shifts. This guide walks you through adding local fonts, setting up styles, and using them with Tailwind CSS. You’ll also learn how to handle multiple fonts without hassle.
Let’s get started!
Loading fonts locally in Next.js provides several benefits:
• Improved Performance: Reduces external HTTP requests to Google Fonts or other web font providers.
• Greater Control: Customize font styles, font-weight variations, and CSS variable settings as needed.
• Reduced Layout Shift: Ensures visual stability by avoiding delays caused by web fonts loading asynchronously.
Before defining a custom local font, store the font files in a structured way. A common approach is to place them inside the public directory:
1/public/fonts/ 2 ├── Inter-Regular.woff2 3 ├── Inter-Bold.woff2 4 ├── RobotoMono-Regular.woff2 5 ├── RobotoMono-Bold.woff2
The public folder serves static assets directly from the root directory, making it a suitable location for storing font files.
Next.js serves files from the /public
folder at the root URL. For example, a font stored at /public/fonts/Inter-Regular.woff2
is accessible via /fonts/Inter-Regular.woff2
in the browser.
next/font/local
is built into Next.js 13+ and doesn’t require additional installation.
To define a custom local font, use next/font/local. This ensures that font files are preloaded and applied efficiently.
Example: Importing a Local Font in Next.js
Create a new font configuration inside the app/layout.tsx
file:
1import localFont from 'next/font/local'; 2 3const inter = localFont({ 4 src: [ 5 { path: '/fonts/Inter-Regular.woff2', weight: '400', style: 'normal' }, 6 { path: '/fonts/Inter-Bold.woff2', weight: '700', style: 'normal' }, 7 ], 8 variable: '--font-inter', 9}); 10 11export default inter;
This import statement defines the font family and font weight variations, making it accessible throughout the Next.js app.
Once imported, the font can be applied globally or within specific components.
Example: Applying the Font in _app.tsx
Modify the root layout file to include the font in the html element:
1import inter from './layout'; 2 3export const metadata = { 4 title: 'Next.js Local Fonts Example', 5}; 6 7export default function RootLayout({ children }: { children: React.ReactNode }) { 8 return ( 9 <html lang="en" className={inter.variable}> 10 <body>{children}</body> 11 </html> 12 ); 13}
The html lang attribute ensures proper language settings, while the inter.variable
CSS variable makes the font available globally.
If using Tailwind CSS, define the font family inside tailwind.config.js
:
1module.exports = { 2 theme: { 3 extend: { 4 fontFamily: { 5 inter: ['var(--font-inter)', 'Inter', 'sans-serif'], 6 }, 7 }, 8 }, 9};
Now, use Tailwind CSS classes to apply the font:
1export default function HomePage() { 2 return <h1 className="font-inter text-2xl">Hello, Next.js Local Fonts</h1>; 3}
This integrates the custom local font seamlessly with Tailwind CSS.
When adding multiple fonts, define each font separately with unique CSS variables.
1import localFont from 'next/font/local'; 2 3const inter = localFont({ 4 src: '/fonts/Inter-Regular.woff2', 5 variable: '--font-inter', 6}); 7 8const robotoMono = localFont({ 9 src: '/fonts/RobotoMono-Regular.woff2', 10 variable: '--font-roboto-mono', 11}); 12 13export { inter, robotoMono };
Apply both fonts in the layout file:
1import { inter, robotoMono } from './layout'; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}> 6 <body>{children}</body> 7 </html> 8 ); 9}
Then, use different fonts within components:
1export default function Typography() { 2 return ( 3 <div> 4 <h1 className="font-inter text-3xl">Inter Font</h1> 5 <p className="font-roboto-mono text-lg">Roboto Mono Font</p> 6 </div> 7 ); 8}
This setup ensures both fonts are loaded efficiently and applied correctly.
Different font weights can be defined inside next/font/local
. Use the weight property to specify different styles.
1import localFont from 'next/font/local'; 2 3const inter = localFont({ 4 src: [ 5 { path: '/fonts/Inter-Regular.woff2', weight: '400' }, 6 { path: '/fonts/Inter-Medium.woff2', weight: '500' }, 7 { path: '/fonts/Inter-Bold.woff2', weight: '700' }, 8 ], 9 variable: '--font-inter', 10}); 11 12export default inter;
Then apply different font weights using Tailwind CSS:
1export default function Page() { 2 return ( 3 <div> 4 <h1 className="font-inter font-bold text-4xl">Bold Inter</h1> 5 <p className="font-inter font-medium text-lg">Medium Inter</p> 6 <p className="font-inter font-normal text-base">Regular Inter</p> 7 </div> 8 ); 9}
This approach ensures consistent font styles across the application.
Font optimization plays a key role in improving web performance. Next.js automatically optimizes local fonts when using next/font/local
. To further enhance font rendering:
Use woff2
format for smaller file sizes.
If you are not using next/font/local
, manually preload fonts inside _document.tsx
:
1<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
font-display: swap
for better rendering. Adding font-display: swap
ensures text remains visible while the font loads. This prevents blank text (FOIT - Flash of Invisible Text) and improves user experience.These techniques reduce layout shift and improve visual stability.
Next.js local fonts help improve loading speed and font stability. They reduce layout shifts and give better control over typography.
By setting up font files correctly and using next/font/local, custom fonts load smoothly. Tailwind CSS makes styling easier.
A well-structured approach improves both performance and user experience. With these steps, fonts will look great and load fast in any Next.js project.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.