We added some images to our pages,
and our website is starting
to look more interesting.
We may also want to arrange these cards
differently on a large screen,
but we'll think about that when
we have a few more reviews.
What I want to do in this video
is use a custom font,
like for the heading of each page.
Google Fonts is a great place where we
can find many different font families.
It's better if we choose a variable font,
that can easily be scaled to different sizes.
Feel free to search the available fonts,
and pick the one you like the most.
But I'll use "Orbitron",
that is a futuristic font, and seems
appropriate for our gaming website.
Before using a font, especially
if it's a commercial project,
you may want to check the license.
But we could use any of those fonts in a web page
simply by linking to the right
URL provided by Google.
However, this is not usually the best approach,
because it means our website will
rely on Google's servers.
And this also has implications for privacy,
because any time a user opens our website,
their browser will send requests
to Google's servers.
That's why it's usually better
to download the font files
and host them on your own website.
Next.js makes this very easy to do.
It will automatically download the necessary
font files when we build our app,
and then include them as static
assets in our own website.
This way no requests will be sent to Google,
and that may also simplify your
privacy policy document.
So, let's see how to use this
feature in our application.
Inside the "app" folder
we can create a new file, called
"fonts.js" for example.
The name is not important.
But here we want to import a function
from the "next/font" module.
This contains two folders: one for "google",
and the other one for "local" fonts.
So you can also download a font from anywhere,
and use it as a "local" one.
But we'll use Google Fonts, so
let's select that folder.
Now, this module provides a function
for every possible font,
so if I start typing "Orbitron",
it will suggest the right function.
If you prefer a different font,
of course you can import that one instead.
But the next step is to initialize
our custom font,
by creating a constant, like "orbitron",
that's the result of calling the
function provided by Next.js.
This will set up this particular
font in our application,
and we can also pass it an
object with some options.
It's a good idea to specify
which "subsets" we want.
"subsets" is an array, where we can list basically
which languages we want to support.
Our website will be in English, so
we only need the "latin" subset.
But some fonts support other alphabets,
like "greek", "cyrillic", and so on.
Anyway, once we've exported our custom font,
we can use it in any component we like.
For example, let's apply it to our Heading.
What we need to do here is import
that "orbitron" font,
and note that we can import it from "@/app/fonts",
using the path alias we set
up in the previous section.
Anyway, we can now use this custom font
by adding it as a CSS class.
Now, since we need to insert that variable,
I'll change this value to be
a backtick-delimited string.
This way we can put "orbitron.className"
as an expression.
So, the custom font has a "className" property
that will give us the right CSS class.
If we save this file,
you can see that the text in the Heading
is using the Orbitron font.
And since we modified the
common Heading component,
it will be the same on all pages.
I quite like this Orbitron font.
I think it fits well with the
theme of this website.
Anyway, using the custom font was pretty easy.
But the main advantage of this Next.js feature
is that it should automatically
prepare the font files
as part of the build.
So, let's try building our app,
and see how that works.
The build succeeded,
and there's nothing really new in the logs,
so let's start the production server,
and go and test our app.
Let's use the Chrome DevTools to
look at the Network requests.
We want to see which files are
loaded when we open the page.
You can see that this request
has "font" as its "Type".
The file extension is "woff2",
which is in fact a file format used by fonts.
If we look at the Request URL
we can see that this file was served
by our local Next.js server.
So it's not calling Google's servers.
The font file is hosted together with our pages.
If you were to look inside the ".next"
folder created by the build,
you should see that font file inside
the "static/media" folder.
Now, let's also use the element inspector,
and take a look at the text with our custom font.
In the Elements panel we can see
exactly which styles it's using.
The h1 element has a class with a strange name,
that was autogenerated by Next.js,
and in the Styles tab we can see that
it applies a font-family rule to
use our custom Orbitron font.
So Next.js also generated all
the necessary CSS rules.
It takes care of all the details,
so we don't have to.
All we need to do is add the right
"className" to our element,
after initializing the custom font,
like we did here.