Consider this Next.js component using next/font/google to load the Roboto font:
import { Roboto } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'], weight: '400' });
export default function Home() {
return <main className={roboto.className}>Hello World</main>;
}What font style will the text inside <main> have?
import { Roboto } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'], weight: '400' }); export default function Home() { return <main className={roboto.className}>Hello World</main>; }
Check how the Roboto function from next/font/google is used and what the className property does.
Using next/font/google with the Roboto function loads the font with specified options. The className property applies the font style to the element. Weight '400' means normal weight, and the latin subset is loaded as requested.
You want to load the Inter font with weights 400 and 700 using next/font/google. Which import and usage syntax is correct?
Check the property name and value type for specifying multiple weights in the font options.
The correct property is weight (singular) and it accepts an array of strings for multiple weights. Option A uses the correct syntax.
Given this code snippet using next/font/local:
import localFont from 'next/font/local';
const myFont = localFont({
src: './fonts/MyFont.woff2',
weight: '400',
style: 'normal'
});
export default function Page() {
return <div className={myFont.className}>Test Text</div>;
}The font styles do not apply in the browser. What is the most likely cause?
import localFont from 'next/font/local'; const myFont = localFont({ src: './fonts/MyFont.woff2', weight: '400', style: 'normal' }); export default function Page() { return <div className={myFont.className}>Test Text</div>; }
Check the file path and existence of the font file relative to the component.
If the font file path is wrong or the file is missing, the font cannot load and styles won't apply. The other options are incorrect because weight as string is allowed, src can be a string or array, and className is provided.
You use a variable font with next/font/google like this:
import { Roboto_Flex } from 'next/font/google';
const robotoFlex = Roboto_Flex({ subsets: ['latin'] });
export default function Home() {
return <main className={robotoFlex.className}>Hello</main>;
}What is the expected effect on the page size and font loading compared to loading multiple static weights?
import { Roboto_Flex } from 'next/font/google'; const robotoFlex = Roboto_Flex({ subsets: ['latin'] }); export default function Home() { return <main className={robotoFlex.className}>Hello</main>; }
Think about how variable fonts bundle multiple styles in one file.
Variable fonts load a single font file that can represent many weights and styles, reducing total page size compared to loading multiple static font files.
Which of the following best describes how next/font improves font loading in Next.js apps?
Consider how next/font handles font CSS and rendering to improve user experience.
Next/font extracts and inlines critical font CSS, preloads fonts to avoid delays, and applies font classes early to prevent layout shifts, improving both accessibility and performance.