All language subtitles for 004 Custom Tailwind Font_en

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.