What is @next/font?
@next/font is a package designed to optimize and manage fonts in Next.js applications. It provides a streamlined way to include and configure custom fonts, Google Fonts, and local fonts, ensuring better performance and easier font management.
What are @next/font's main functionalities?
Custom Fonts
This feature allows you to include custom fonts in your Next.js application by specifying the font source, weight, and style.
import { createFont } from '@next/font';
const myFont = createFont({
src: '/path/to/font.woff2',
weight: '400',
style: 'normal'
});
export default function MyApp() {
return (
<div style={{ fontFamily: myFont }}>Hello, world!</div>
);
}
Google Fonts
This feature allows you to easily include Google Fonts in your Next.js application by specifying the font family, weights, and styles.
import { createGoogleFont } from '@next/font';
const roboto = createGoogleFont({
family: 'Roboto',
weights: ['400', '700'],
styles: ['normal', 'italic']
});
export default function MyApp() {
return (
<div style={{ fontFamily: roboto }}>Hello, world!</div>
);
}
Local Fonts
This feature allows you to include local fonts in your Next.js application by specifying the local path to the font file, weight, and style.
import { createLocalFont } from '@next/font';
const localFont = createLocalFont({
src: '/local/path/to/font.woff2',
weight: '400',
style: 'normal'
});
export default function MyApp() {
return (
<div style={{ fontFamily: localFont }}>Hello, world!</div>
);
}
Other packages similar to @next/font
typeface
The 'typeface' package allows you to self-host fonts by providing a collection of pre-packaged fonts. It simplifies the process of including fonts in your project but does not offer the same level of integration with Next.js as @next/font.
webfontloader
The 'webfontloader' package is a JavaScript library for loading web fonts. It supports Google Fonts, Typekit, and custom fonts. While it is versatile, it requires more manual setup compared to the streamlined approach of @next/font.