Original subtitles

We configured Tailwind CSS adding our custom font.

And we're using the "font-orbitron" class

for a few different elements of this page.

But, what if we want to change the default font?

The one used in the footer, for example,

and also for the review text,

that right now is just a placeholder,

but at some point will be a long article,

taking up most of the page.

We've already seen this briefly,

when looking at the Tailwind configuration.

In addition to adding our own fonts,

we can also override the predefined

fonts that come with Tailwind.

And there is one called "sans",

that's used as the default for all our text.

So we just need to go through the same process

we followed in the previous video,

but using "sans" as the font name

in the Tailwind configuration.

Now, as for which font to use,

I suggest this "Exo 2",

which also looks a bit futuristic,

but it's more regular than the Orbitron font.

But again, if you want to use a different font,

feel free to do so.

Now, since this is very similar to

what we did in the previous video,

I suggest you could do this yourself,

as an exercise.

Let me give you a quick overview

of what's involved.

You'll need to initialize another

custom font in this file.

It can be "Exo 2", or whichever

other font you prefer.

Then in "layout.jsx" you need

to add the right variable

to the "className" of the "html" element,

just like we did for "orbitron".

Finally, you should update the

Tailwind configuration,

but in this case using "sans"

as the "fontFamily" name,

so it will override the default font.

And since it's the default, you should see that

all the regular text, like in the review body,

will automatically start using the new font.

So, if you want to try this,

pause the video now, and go

ahead with the exercise.

As usual, I'll show you my code in a few seconds.

Alright, let's take a look at the solution.

In "fonts.js" I initialized the "Exo_2" font,

assigning it to a CSS variable

named "--font-exo2".

And of course, "Exo_2" is imported

from "next/font/google".

Then, in the RootLayout,

I've added the "exo2.variable" to the

CSS classes for the "html" element.

Note that I'm passing a backtick-delimited

string as the "className",

so I can insert the two custom

font variables inside.

And finally, in "tailwind.config.js",

I'm redefining the "sans" font family,

to use the "--font-exo2" CSS variable

as the first choice.

And with this, if you look at

the page in the browser,

you can see "Exo 2" being used

as the default text font.

Let me comment out this line, so

you can see the difference.

If you look at the review text for example,

right now it's using the predefined Tailwind font.

But if I uncomment the custom

"sans" configuration,

you can see that the text looks a bit different.

And this makes our website a bit more unique.

Now, if you have any issues with fonts,

or styles in general,

remember that you can always

use the Developer Tools.

If we inspect this paragraph element for example,

we can see exactly which font it's using.

And if we look in the Elements panel,

we can also see the "Computed" styles,

which means the result of applying

all the CSS rules.

If we filter for "font-family" for example,

this will again show which value

is being used for this element.

But here we can also click this little arrow,

and it will show us where

that CSS rule comes from.

In this case, the "font-family" is

set at the "html" element level.

That's how Tailwind sets the default font.

But it takes its value from

the "--font-exo2" variable,

that's defined by a separate CSS class.

This is in fact the "exo2.variable" class

that we add to the "html" element

in our RootLayout.

Anyway, this is how we can override

the default Tailwind font:

simply redefine the "sans" font family.