Next.js Discord

Discord Forum

Wondering what a particular piece of code does in the tutorial

Answered
Pyrenean Mountain Dog posted this in #help-forum
Open in Discord
Pyrenean Mountain DogOP
In the [Fetching data for the dashboard overview page](https://nextjs.org/learn/dashboard-app/fetching-data#fetching-data-for-the-dashboard-overview-page) of Chapter 7, line 9 - it shows..

<h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>


What is ${lusitana.className} being replaced with? I can right click on classname in vscode and get an option to "Go to Definition" - which I have tried - but; looking at the content of node_modules/next/dist/compiled/@next/font/dist/types.d.ts I can't see anything that makes sense to be plugged into line 9 classname and the context in which classname is being used. I'm confused. Am I looking in the wrong place?

If ${lusitana.className} were to be resolved in line 9 (f we could see what it resolves to) what would it be?
Answered by joulev
it's a [font](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts). it will be resolved into a string specifying a CSS class that will be something like
.computer-generated-class-name {
  font-family: Lusitana;
}
View full answer

5 Replies