Configure multiple fonts

[AutomateAaron]

Pardon the simple question, but I would like to configure the typography of the website to use a Sans-Serif font for the titles and a Serif font for the text blocks. As well as configure a custom mono font for the code blocks.

I'm trying to follow this tutorial: https://nextjs.org/docs/basic-features/font-optimization

But when looking through the code generated for this starter it doesn't seem like it's using the css variables described in the doc above?

Again, pardon the beginner question but could someone describe the steps required to do what I'm looking for?

(I know this is similar to this thread but as far as I can tell the typography plugin doesn't address the font importing issues)