1
00:00:03,000 --> 00:00:05,490
We added some images to our pages,

2
00:00:05,490 --> 00:00:07,141
and our website is starting

3
00:00:07,141 --> 00:00:08,671
to look more interesting.

4
00:00:08,732 --> 00:00:11,825
We may also want to arrange these cards

5
00:00:11,825 --> 00:00:14,205
differently on a large screen,

6
00:00:14,284 --> 00:00:16,323
but we'll think about that when

7
00:00:16,323 --> 00:00:18,099
we have a few more reviews.

8
00:00:18,164 --> 00:00:20,588
What I want to do in this video

9
00:00:20,588 --> 00:00:22,229
is use a custom font,

10
00:00:22,308 --> 00:00:24,801
like for the heading of each page.

11
00:00:24,801 --> 00:00:27,546
Google Fonts is a great place where we

12
00:00:27,546 --> 00:00:30,292
can find many different font families.

13
00:00:30,365 --> 00:00:33,435
It's better if we choose a variable font,

14
00:00:33,435 --> 00:00:36,898
that can easily be scaled to different sizes.

15
00:00:36,898 --> 00:00:39,592
Feel free to search the available fonts,

16
00:00:39,592 --> 00:00:42,149
and pick the one you like the most.

17
00:00:42,149 --> 00:00:44,248
But I'll use "Orbitron",

18
00:00:44,248 --> 00:00:47,241
that is a futuristic font, and seems

19
00:00:47,241 --> 00:00:50,152
appropriate for our gaming website.

20
00:00:50,235 --> 00:00:52,261
Before using a font, especially

21
00:00:52,261 --> 00:00:54,157
if it's a commercial project,

22
00:00:54,222 --> 00:00:56,426
you may want to check the license.

23
00:00:56,426 --> 00:01:00,210
But we could use any of those fonts in a web page

24
00:01:00,210 --> 00:01:02,818
simply by linking to the right

25
00:01:02,818 --> 00:01:04,818
URL provided by Google.

26
00:01:04,905 --> 00:01:08,518
However, this is not usually the best approach,

27
00:01:08,518 --> 00:01:11,294
because it means our website will

28
00:01:11,294 --> 00:01:13,397
rely on Google's servers.

29
00:01:13,482 --> 00:01:16,886
And this also has implications for privacy,

30
00:01:16,886 --> 00:01:20,435
because any time a user opens our website,

31
00:01:20,435 --> 00:01:22,886
their browser will send requests

32
00:01:22,886 --> 00:01:24,418
to Google's servers.

33
00:01:24,494 --> 00:01:26,830
That's why it's usually better

34
00:01:26,830 --> 00:01:28,854
to download the font files

35
00:01:28,932 --> 00:01:31,690
and host them on your own website.

36
00:01:31,690 --> 00:01:34,940
Next.js makes this very easy to do.

37
00:01:34,940 --> 00:01:38,176
It will automatically download the necessary

38
00:01:38,176 --> 00:01:40,602
font files when we build our app,

39
00:01:40,676 --> 00:01:43,260
and then include them as static

40
00:01:43,260 --> 00:01:45,428
assets in our own website.

41
00:01:45,511 --> 00:01:48,920
This way no requests will be sent to Google,

42
00:01:48,920 --> 00:01:51,243
and that may also simplify your

43
00:01:51,243 --> 00:01:53,041
privacy policy document.

44
00:01:53,116 --> 00:01:55,055
So, let's see how to use this

45
00:01:55,055 --> 00:01:56,860
feature in our application.

46
00:01:56,927 --> 00:01:58,990
Inside the "app" folder

47
00:01:58,990 --> 00:02:01,557
we can create a new file, called

48
00:02:01,557 --> 00:02:03,402
"fonts.js" for example.

49
00:02:03,482 --> 00:02:05,507
The name is not important.

50
00:02:05,507 --> 00:02:08,433
But here we want to import a function

51
00:02:08,433 --> 00:02:10,646
from the "next/font" module.

52
00:02:10,726 --> 00:02:14,496
This contains two folders: one for "google",

53
00:02:14,496 --> 00:02:17,228
and the other one for "local" fonts.

54
00:02:17,228 --> 00:02:20,500
So you can also download a font from anywhere,

55
00:02:20,500 --> 00:02:22,601
and use it as a "local" one.

56
00:02:22,601 --> 00:02:24,773
But we'll use Google Fonts, so

57
00:02:24,773 --> 00:02:26,584
let's select that folder.

58
00:02:26,657 --> 00:02:29,577
Now, this module provides a function

59
00:02:29,577 --> 00:02:31,525
for every possible font,

60
00:02:31,606 --> 00:02:34,402
so if I start typing "Orbitron",

61
00:02:34,402 --> 00:02:36,887
it will suggest the right function.

62
00:02:36,887 --> 00:02:39,050
If you prefer a different font,

63
00:02:39,050 --> 00:02:42,137
of course you can import that one instead.

64
00:02:42,137 --> 00:02:44,943
But the next step is to initialize

65
00:02:44,943 --> 00:02:46,263
our custom font,

66
00:02:46,346 --> 00:02:49,425
by creating a constant, like "orbitron",

67
00:02:49,425 --> 00:02:51,938
that's the result of calling the

68
00:02:51,938 --> 00:02:54,216
function provided by Next.js.

69
00:02:54,294 --> 00:02:56,544
This will set up this particular

70
00:02:56,544 --> 00:02:58,232
font in our application,

71
00:02:58,302 --> 00:03:00,167
and we can also pass it an

72
00:03:00,167 --> 00:03:01,961
object with some options.

73
00:03:02,033 --> 00:03:04,179
It's a good idea to specify

74
00:03:04,179 --> 00:03:06,086
which "subsets" we want.

75
00:03:06,166 --> 00:03:09,798
"subsets" is an array, where we can list basically

76
00:03:09,798 --> 00:03:12,341
which languages we want to support.

77
00:03:12,414 --> 00:03:15,028
Our website will be in English, so

78
00:03:15,028 --> 00:03:17,489
we only need the "latin" subset.

79
00:03:17,566 --> 00:03:20,516
But some fonts support other alphabets,

80
00:03:20,516 --> 00:03:23,277
like "greek", "cyrillic", and so on.

81
00:03:23,277 --> 00:03:27,111
Anyway, once we've exported our custom font,

82
00:03:27,111 --> 00:03:30,088
we can use it in any component we like.

83
00:03:30,088 --> 00:03:33,002
For example, let's apply it to our Heading.

84
00:03:33,002 --> 00:03:35,802
What we need to do here is import

85
00:03:35,802 --> 00:03:37,583
that "orbitron" font,

86
00:03:37,668 --> 00:03:41,666
and note that we can import it from "@/app/fonts",

87
00:03:41,666 --> 00:03:43,684
using the path alias we set

88
00:03:43,684 --> 00:03:45,701
up in the previous section.

89
00:03:45,776 --> 00:03:48,845
Anyway, we can now use this custom font

90
00:03:48,845 --> 00:03:51,519
by adding it as a CSS class.

91
00:03:51,519 --> 00:03:54,662
Now, since we need to insert that variable,

92
00:03:54,662 --> 00:03:56,732
I'll change this value to be

93
00:03:56,732 --> 00:03:58,802
a backtick-delimited string.

94
00:03:58,876 --> 00:04:02,021
This way we can put "orbitron.className"

95
00:04:02,021 --> 00:04:03,358
as an expression.

96
00:04:03,437 --> 00:04:07,528
So, the custom font has a "className" property

97
00:04:07,528 --> 00:04:10,349
that will give us the right CSS class.

98
00:04:10,349 --> 00:04:11,807
If we save this file,

99
00:04:11,807 --> 00:04:14,681
you can see that the text in the Heading

100
00:04:14,681 --> 00:04:16,620
is using the Orbitron font.

101
00:04:16,692 --> 00:04:18,646
And since we modified the

102
00:04:18,646 --> 00:04:20,599
common Heading component,

103
00:04:20,677 --> 00:04:23,189
it will be the same on all pages.

104
00:04:23,189 --> 00:04:25,716
I quite like this Orbitron font.

105
00:04:25,716 --> 00:04:27,654
I think it fits well with the

106
00:04:27,654 --> 00:04:29,124
theme of this website.

107
00:04:29,191 --> 00:04:32,929
Anyway, using the custom font was pretty easy.

108
00:04:32,929 --> 00:04:36,693
But the main advantage of this Next.js feature

109
00:04:36,693 --> 00:04:38,874
is that it should automatically

110
00:04:38,874 --> 00:04:40,421
prepare the font files

111
00:04:40,492 --> 00:04:42,024
as part of the build.

112
00:04:42,024 --> 00:04:44,358
So, let's try building our app,

113
00:04:44,358 --> 00:04:46,089
and see how that works.

114
00:04:47,104 --> 00:04:48,518
The build succeeded,

115
00:04:48,518 --> 00:04:51,480
and there's nothing really new in the logs,

116
00:04:51,480 --> 00:04:54,034
so let's start the production server,

117
00:04:54,034 --> 00:04:55,762
and go and test our app.

118
00:04:55,762 --> 00:04:58,200
Let's use the Chrome DevTools to

119
00:04:58,200 --> 00:05:00,410
look at the Network requests.

120
00:05:00,486 --> 00:05:02,532
We want to see which files are

121
00:05:02,532 --> 00:05:04,510
loaded when we open the page.

122
00:05:04,578 --> 00:05:06,740
You can see that this request

123
00:05:06,740 --> 00:05:08,604
has "font" as its "Type".

124
00:05:08,678 --> 00:05:11,461
The file extension is "woff2",

125
00:05:11,461 --> 00:05:15,028
which is in fact a file format used by fonts.

126
00:05:15,028 --> 00:05:17,231
If we look at the Request URL

127
00:05:17,231 --> 00:05:20,177
we can see that this file was served

128
00:05:20,177 --> 00:05:22,469
by our local Next.js server.

129
00:05:22,551 --> 00:05:25,764
So it's not calling Google's servers.

130
00:05:25,764 --> 00:05:29,715
The font file is hosted together with our pages.

131
00:05:29,715 --> 00:05:32,598
If you were to look inside the ".next"

132
00:05:32,598 --> 00:05:34,722
folder created by the build,

133
00:05:34,797 --> 00:05:37,680
you should see that font file inside

134
00:05:37,680 --> 00:05:39,761
the "static/media" folder.

135
00:05:39,841 --> 00:05:43,134
Now, let's also use the element inspector,

136
00:05:43,134 --> 00:05:46,491
and take a look at the text with our custom font.

137
00:05:46,491 --> 00:05:48,738
In the Elements panel we can see

138
00:05:48,738 --> 00:05:50,985
exactly which styles it's using.

139
00:05:51,055 --> 00:05:55,170
The h1 element has a class with a strange name,

140
00:05:55,170 --> 00:05:58,438
that was autogenerated by Next.js,

141
00:05:58,438 --> 00:06:01,432
and in the Styles tab we can see that

142
00:06:01,432 --> 00:06:04,254
it applies a font-family rule to

143
00:06:04,254 --> 00:06:06,812
use our custom Orbitron font.

144
00:06:06,900 --> 00:06:09,699
So Next.js also generated all

145
00:06:09,699 --> 00:06:12,016
the necessary CSS rules.

146
00:06:12,112 --> 00:06:14,265
It takes care of all the details,

147
00:06:14,265 --> 00:06:15,569
so we don't have to.

148
00:06:15,634 --> 00:06:18,020
All we need to do is add the right

149
00:06:18,020 --> 00:06:19,914
"className" to our element,

150
00:06:19,984 --> 00:06:22,710
after initializing the custom font,

151
00:06:22,710 --> 00:06:24,034
like we did here.