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.