We've seen how to include a custom
font in our Next.js application.
And so far we used it as a "className",
that we need to add to any element containing
text that we want to display in that font.
Now, in our project we use Tailwind
CSS for most styles.
And Tailwind already configures
some fonts by default.
In fact, it also lets us define
our own custom fonts,
in the "tailwind.config.js" file.
Now, the Next.js font module
can also be used together with Tailwind CSS.
We can configure a custom font
like in this example.
When initializing it, we can
assign it to a CSS variable,
like "--font-inter".
Then we need to add that variable to the
CSS classes of the "html" element,
to make it available globally in our application.
And finally we need to configure Tailwind
to use that CSS variable as the font.
In this case it's using it as
the default "sans" family,
but we can also add a custom font name.
This way, we'll then be able to use our font
just like any other Tailwind utility class.
Let's see how this works in practice,
if we go back to our application.
So, when initializing the Orbitron font,
we can set a "variable" option,
with the name of the CSS variable
we'll use to refer to this font.
By the way, if you're not familiar
with CSS variables,
I've included a link to an article explaining them
in this lecture's Resources.
But, after initializing our font with a variable,
we need to define that CSS variable globally
by adding it to the top-level "html" element.
Here we need to import our "orbitron" font,
and pass "orbitron.variable" as the CSS class.
Again, this will define the right CSS variable.
The next step is to configure Tailwind.
Here we can "extend" the "theme",
and customize the "fontFamily" mappings.
We can add our own family, called "orbitron",
and as value we need to pass an array,
with the possible options to choose from.
As the first choice we want
to use the CSS variable
that we defined when initializing the font.
We need to use exactly the same string
in the Tailwind configuration.
Now, it's a good idea to also
provide a fall-back option,
just in case for whatever reason our
custom font cannot be loaded.
We could put "sans-serif" as the second option,
that should always be available in any browser.
Ok, we can now save this "tailwind.config.js"
file.
And with this, our custom font will
be available as a Tailwind class,
which means it will be easier
to use it in our components.
We can simply add it to the CSS class list,
as "font-orbitron".
You can see that it's even available
in the auto-completion.
That's because we added "orbitron" as a "fontFamily"
in the Tailwind configuration.
And this means we no longer need
to include "orbitron.className",
as an expression.
So we can also use a regular string as the value,
and we can remove the import as well.
If we save this change, the Heading
should still use the Orbitron font.
So, you can see that, with this approach,
there's an initial bit of configuration required,
but then using the font in
our components is easier.
In fact, suppose we want to apply
it to our NavBar as well,
for some of our links.
Let's change "Home" to say
"Indie Gamer" by the way,
since that's the name of our website.
Now we could use "font-orbitron" for this text.
We don't need to import anything,
it's just a Tailwind utility class.
You can see in the page, in the top-left corner,
that "Indie Gamer" now looks more like a logo.
Maybe we could make it bold as well,
so it will stand out even more.
And we could also push the
other links to the right,
by setting the "margin-left" to "auto".
You can see that the "Reviews" and "About"
links are now on the right.
Now, if we go to the Reviews page,
we could change the card titles as well,
to use the Orbitron font.
Let me open the right file.
Again, we just need to add "font-orbitron"
to the "h2" element,
and it will be used for the "Hollow Knight" text.
That looks good,
but maybe we can make it a bit bolder,
with "font-semibold".
Ok, I like that.
Let's just apply the same styles
to the other item as well,
and "Stardew Valley" will use the same font.
Good. You can see how, using a custom font
gives a bit more character to our pages.
And, when using Tailwind,
it's very easy to apply a custom
font to any element.
We just need to configure it first,
like we did here.