How to Optimize Fonts in Next.js
Blazity
Performance Optimization
Discover how `next/font` revolutionizes web font optimization, addressing common issues like performance, layout shifts, and configuration complexity with automation and built-in improvements.
The Expert Guide to Next.js Performance Optimization
This article is part of The Expert Guide to Next.js Performance Optimization, a comprehensive Ebook you can download for free here.
The guide covers every aspect of building fast, scalable web apps with Next.js, including:
- Streaming, Suspense & Hydration
- Third-Party Scripts
- Font Optimization
- Rendering Strategies
- Infrastructure
- Real-life Examples
- How to Measure Web Performance
- Bundle Analysis.
This article delves into how next/font addresses common challenges in web font optimization, such as recurrent network requests, Flash of Invisible Text (FOIT), Flash of Unstyled Text (FOUT), and manual configuration complexities. .
It highlights next/font 's ability to reduce layout shifts and facilitate efficient, self-hosted font loading, even for Google Fonts, ultimately streamlining development and enhancing user experience.
How to Optimize Fonts in Next.js?
The traditional approach to handling fonts in web development encountered several problems that could negatively impact both performance and user experience:
- Recurrent Network Requests: Without proper font caching strategies (e.g., missing cache control headers), the browser could repeatedly request fonts each time a page loads. This unnecessary traffic increases bandwidth usage and slows down page load times, especially on slower connections.
- Flash of invisible text (FOIT): When fonts are downloaded asynchronously to avoid blocking DOM rendering, delays can cause the text to appear late, disrupting the user’s reading experience.
- Flash of unstyled text (FOUT): Fallback fonts may initially display before switching to the web font once it's loaded, causing visible layout shifts that can be jarring to users. These shifts also negatively impact Core Web Vitals, important metrics for user experience, and SEO.
- Manual Configuration Complexity: Developers had to manually configure CSS properties like font-display to control font loading behavior. Balancing performance and visual stability required careful tuning, making the process error-prone and time-consuming.
- Inefficient Format and Resource Usage: Without optimization, browsers might download larger or outdated font formats instead of more efficient ones like WOFF2. Although modern browsers prioritize better formats by default, inefficiencies can still occur.
This is where the next/font feature comes in, addressing the limitations of traditional font management with built-in improvements and automation. Let’s explore how it works and the benefits it offers.
How to Implement Next.js Fonts?
For instance, next/font offers two key advantages that are highly valuable in modern web development:
- Reducing Layout Shifts: By automatically applying the CSS `size-adjust` property, next/font preserve maintain the layout during font loading. It minimizes layout shifts, which are a common issue affecting user experience.
- Efficient Font Loading: Instead of relying on external font requests, next/font allows developers to include fonts directly in the project. During the build process, Next.js downloads the necessary font and CSS files and bundles them with the application, serving them as part of a unified deployment package.
Additionally, next/font supports all Google Fonts with performance and privacy in mind. Font and CSS files are downloaded at build time and self-hosted alongside your static assets. If configured correctly, the browser does not send requests to Google.
Here’s an example of how to implement Google Fonts using next/font in a Next.js application:
Code
1
2import { Inter } from 'next/font/google';
3
4const inter = Inter({
5 subsets: ['latin'],
6 display: 'swap',
7});
8
9export const RootLayout = ({ children }: { children: React.ReactNode }) => {
10 return (
11 <html lang="en" className={inter.className}>
12 <body>{children}</body>
13 </html>
14 );
15};
16In summary, next/font is a powerful tool that automates many complex, time-consuming tasks in web font optimization. It streamlines font loading, resource delivery, and layout stability—reducing developer effort while improving the performance and reliability of web applications.
By handling the details of font management, next/font lets developers focus on other parts of their projects. This ensures that fonts enhance both aesthetics and user experience without the need for manual tuning.
WARNING:
One important thing to note here is that it’s crucial to load each font only once (as a singleton). Loading the same font across multiple files can result in multiple instances being hosted, which negatively impacts performance. If you require the font instance in different locations, ensure that you export the result of the loader function and import it where needed.
Similar to next/image, there are also manual methods to boost the performance, such as:
- font-display: swap
- using system fonts instead of external ones
- preloading fonts
But with tools like next/font available, the manual effort and configuration required by other methods is rarely worth it.
Using Variable Fonts
For a more advanced approach and optimal performance, consider using Variable Fonts. Although introduced in 2016, they remain underused, causing many web applications to miss out on valuable font-related performance improvements.
Variable Fonts eliminate the need for multiple files for different styles and weights, significantly reducing total file size and providing complete control over typography.
With Variable Fonts, you're not restricted to predefined weights and styles. You can define any weight and adjust optical size for precise typographic control that improves your application's design.
One major benefit of Variable Fonts is improved performance. A single file can significantly reduce overall size when working with fonts that include multiple weights and styles.
Variable Fonts include multiple styles (like weight, width, and slant) in a single file. This reduces the number of font files that need to be loaded, lowers bandwidth usage, and improves load times.
Since multiple styles are contained in one file, the browser can cache it more effectively, which further improves performance. It can also help with FOUT, as different styles will load simultaneously.
Keypoints
- Layout Stability: next/font prevents flickering and possible layout shifts by automatically adjusting CSS properties.
- Efficient Loading: Bundles fonts directly with applications, eliminating external requests.
- Self-Hosting: Downloads and serves fonts like those from Google Fonts locally, reducing reliance on third-party services and potentially improving performance.
- Simplified API: Offers an easy-to-use API for font management, reducing complexity.
Get a quote
“We are very happy with the outcomes and look forward to continuing to work with them on larger initiatives.”
Brian Grafola
CTO at Vibes
