CogniPrep's root layout loads three font families, from two different mechanisms:

import { GeistSans } from ' geist/font/sans ' ; import { GeistMono } from ' geist/font/mono ' ; import { Space_Grotesk } from ' next/font/google ' ;

const spaceGrotesk = Space_Grotesk ({ subsets : [ ' latin ' ], variable : ' --font-space-grotesk ' , display : ' swap ' , preload : true , // Preload to prevent font flash in header adjustFontFallback : true , });

Enter fullscreen mode

Exit fullscreen mode

All three variable classes go on <html> :

< html className = { ` ${ GeistSans . variable } ${ GeistMono . variable } ${ spaceGrotesk .…