I returned to Next.js after a few years and everything's changed, lol 😅

Ok, i'm using the App Router and would like to pre-load a couple of fonts from next/font/google, and declare those font families as global CSS variables. I don't want to apply them as classNames to specific HTML elements e.g. body or p or whatnot per the examples, I just want my CSS pick up the family via the vars, wherever. Is that possible?

export const lato = Lato({
  subsets: ["latin"],
  variable: "--font-family-body", // <-- this
  weight: ["400"],
});

So then anywhere within my CSS I could just reference the variable. I tried injecting a style tag where I declare them in layout.tsx, but that's apparently a server-only component, not allowed. I tried adding it via Head, doesn't seem to do anything...

Sigh, any tips?