As I transition a create-react-app to nextjs, I'm navigating the new features and challenges. Nextjs 13 brings in next/font, which seems like a valuable addition as I venture into Next.js for the first time. It makes sense to incorporate it into my workflow rather than relying on deprecated methods.
Motivation
My goal is to utilize multiple Google Fonts and have the ability to dynamically apply them throughout the app. I envision creating a central file:
fonts.js
import { Roboto, Poppins } from '@next/font/google';
export const roboto = Roboto({
weight: '400',
subsets: ['latin'],
variable: '--roboto-default'
});
export const poppins = Poppins({
weight: '400',
subsets: ['latin'],
variable: '--poppins-default'
});
This setup would allow me to reference these fonts in any component, ensuring that any changes made will be reflected across all affected components.
Past Experiences / Familiarity
In react-create-app, I utilized sass globals in external stylesheets. By following the standard @import method in a stylesheet and declaring a variable like so:
globalfonts.sass
$font01: 'Roboto, arial, sans-serif';
Components could reference this global font variable in their individual stylesheets:
import globalfonts.sass
.componentname {
font-family: $font01
}
By modifying the value of $font01, all components would automatically update, making it easier to experiment with design changes. Additional variables like $font01--size could also be implemented for further customization.
Question
I am seeking a similar functionality in nextjs13 using next/font within a stylesheet, akin to my previous experiences detailed above, rather than utilizing inline references in each component. While I have set up an app/fonts.js file, importing it into app/layout.js, I am uncertain about the next steps given the shift away from the pages directory structure.
While I can import constants from fonts.js into each component and reference them inline, blending styles between stylesheets and inline references complicates the process. Leveraging sass globals for quick, universal font configuration adjustments seems more intuitive.
Follow up question:
Considering the lack of emphasis on stylesheets in discussions related to next/font online, I raise the question: Are stylesheets becoming obsolete? Is the trend shifting towards styling components individually on a case-by-case basis?
Attempt
If I implement the following in app/layout.jsx
import { roboto, poppins } from './fonts';
import styles from './globals.scss'
export default function RootLayout({ children }) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.jsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className={roboto.className}>{children}</body>
</html>
)
}
The roboto font is not applied, leaving me unsure of my mistake.
If resorting to using className={roboto.className} on every single component where the font should be used (as some suggest), it may complicate future font changes without a centralized reference point like my old approach with $font01.