All language subtitles for 003 Font Optimization_en

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.