Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:07,618
We configured Tailwind CSS adding our custom font.
2
00:00:07,618 --> 00:00:10,575
And we're using the "font-orbitron" class
3
00:00:10,575 --> 00:00:13,411
for a few different elements of this page.
4
00:00:13,411 --> 00:00:16,963
But, what if we want to change the default font?
5
00:00:16,963 --> 00:00:19,794
The one used in the footer, for example,
6
00:00:19,794 --> 00:00:22,215
and also for the review text,
7
00:00:22,215 --> 00:00:25,132
that right now is just a placeholder,
8
00:00:25,132 --> 00:00:28,303
but at some point will be a long article,
9
00:00:28,303 --> 00:00:30,391
taking up most of the page.
10
00:00:30,468 --> 00:00:32,336
We've already seen this briefly,
11
00:00:32,336 --> 00:00:35,059
when looking at the Tailwind configuration.
12
00:00:35,059 --> 00:00:37,715
In addition to adding our own fonts,
13
00:00:37,715 --> 00:00:40,420
we can also override the predefined
14
00:00:40,420 --> 00:00:42,738
fonts that come with Tailwind.
15
00:00:42,816 --> 00:00:45,029
And there is one called "sans",
16
00:00:45,029 --> 00:00:48,295
that's used as the default for all our text.
17
00:00:48,295 --> 00:00:51,077
So we just need to go through the same process
18
00:00:51,077 --> 00:00:53,133
we followed in the previous video,
19
00:00:53,194 --> 00:00:55,895
but using "sans" as the font name
20
00:00:55,895 --> 00:00:58,350
in the Tailwind configuration.
21
00:00:58,432 --> 00:01:01,297
Now, as for which font to use,
22
00:01:01,297 --> 00:01:03,593
I suggest this "Exo 2",
23
00:01:03,593 --> 00:01:06,392
which also looks a bit futuristic,
24
00:01:06,392 --> 00:01:09,804
but it's more regular than the Orbitron font.
25
00:01:09,804 --> 00:01:12,775
But again, if you want to use a different font,
26
00:01:12,775 --> 00:01:13,977
feel free to do so.
27
00:01:14,040 --> 00:01:16,278
Now, since this is very similar to
28
00:01:16,278 --> 00:01:18,516
what we did in the previous video,
29
00:01:18,582 --> 00:01:21,271
I suggest you could do this yourself,
30
00:01:21,271 --> 00:01:22,362
as an exercise.
31
00:01:22,434 --> 00:01:24,727
Let me give you a quick overview
32
00:01:24,727 --> 00:01:26,088
of what's involved.
33
00:01:26,159 --> 00:01:28,688
You'll need to initialize another
34
00:01:28,688 --> 00:01:30,603
custom font in this file.
35
00:01:30,679 --> 00:01:33,039
It can be "Exo 2", or whichever
36
00:01:33,039 --> 00:01:34,714
other font you prefer.
37
00:01:34,790 --> 00:01:37,108
Then in "layout.jsx" you need
38
00:01:37,108 --> 00:01:39,107
to add the right variable
39
00:01:39,187 --> 00:01:42,624
to the "className" of the "html" element,
40
00:01:42,624 --> 00:01:45,268
just like we did for "orbitron".
41
00:01:45,268 --> 00:01:47,279
Finally, you should update the
42
00:01:47,279 --> 00:01:48,821
Tailwind configuration,
43
00:01:48,888 --> 00:01:51,190
but in this case using "sans"
44
00:01:51,190 --> 00:01:53,175
as the "fontFamily" name,
45
00:01:53,254 --> 00:01:56,254
so it will override the default font.
46
00:01:56,254 --> 00:01:59,458
And since it's the default, you should see that
47
00:01:59,458 --> 00:02:02,780
all the regular text, like in the review body,
48
00:02:02,780 --> 00:02:05,873
will automatically start using the new font.
49
00:02:05,873 --> 00:02:07,816
So, if you want to try this,
50
00:02:07,816 --> 00:02:09,652
pause the video now, and go
51
00:02:09,652 --> 00:02:11,286
ahead with the exercise.
52
00:02:11,354 --> 00:02:17,816
As usual, I'll show you my code in a few seconds.
53
00:02:17,816 --> 00:02:20,329
Alright, let's take a look at the solution.
54
00:02:20,329 --> 00:02:24,939
In "fonts.js" I initialized the "Exo_2" font,
55
00:02:24,939 --> 00:02:27,856
assigning it to a CSS variable
56
00:02:27,856 --> 00:02:29,801
named "--font-exo2".
57
00:02:29,898 --> 00:02:32,706
And of course, "Exo_2" is imported
58
00:02:32,706 --> 00:02:34,688
from "next/font/google".
59
00:02:34,771 --> 00:02:36,781
Then, in the RootLayout,
60
00:02:36,781 --> 00:02:40,049
I've added the "exo2.variable" to the
61
00:02:40,049 --> 00:02:43,141
CSS classes for the "html" element.
62
00:02:43,229 --> 00:02:46,467
Note that I'm passing a backtick-delimited
63
00:02:46,467 --> 00:02:48,471
string as the "className",
64
00:02:48,549 --> 00:02:50,888
so I can insert the two custom
65
00:02:50,888 --> 00:02:52,604
font variables inside.
66
00:02:52,682 --> 00:02:56,813
And finally, in "tailwind.config.js",
67
00:02:56,813 --> 00:03:00,165
I'm redefining the "sans" font family,
68
00:03:00,165 --> 00:03:03,509
to use the "--font-exo2" CSS variable
69
00:03:03,509 --> 00:03:05,317
as the first choice.
70
00:03:05,407 --> 00:03:06,950
And with this, if you look at
71
00:03:06,950 --> 00:03:08,227
the page in the browser,
72
00:03:08,280 --> 00:03:10,900
you can see "Exo 2" being used
73
00:03:10,900 --> 00:03:13,082
as the default text font.
74
00:03:13,169 --> 00:03:15,125
Let me comment out this line, so
75
00:03:15,125 --> 00:03:16,774
you can see the difference.
76
00:03:16,835 --> 00:03:19,794
If you look at the review text for example,
77
00:03:19,794 --> 00:03:23,944
right now it's using the predefined Tailwind font.
78
00:03:23,944 --> 00:03:26,283
But if I uncomment the custom
79
00:03:26,283 --> 00:03:27,976
"sans" configuration,
80
00:03:28,057 --> 00:03:31,264
you can see that the text looks a bit different.
81
00:03:31,264 --> 00:03:34,667
And this makes our website a bit more unique.
82
00:03:34,667 --> 00:03:37,878
Now, if you have any issues with fonts,
83
00:03:37,878 --> 00:03:39,607
or styles in general,
84
00:03:39,690 --> 00:03:41,763
remember that you can always
85
00:03:41,763 --> 00:03:43,540
use the Developer Tools.
86
00:03:43,614 --> 00:03:47,309
If we inspect this paragraph element for example,
87
00:03:47,309 --> 00:03:50,523
we can see exactly which font it's using.
88
00:03:50,523 --> 00:03:53,146
And if we look in the Elements panel,
89
00:03:53,146 --> 00:03:55,952
we can also see the "Computed" styles,
90
00:03:55,952 --> 00:03:58,624
which means the result of applying
91
00:03:58,624 --> 00:04:00,039
all the CSS rules.
92
00:04:00,117 --> 00:04:03,601
If we filter for "font-family" for example,
93
00:04:03,601 --> 00:04:06,140
this will again show which value
94
00:04:06,140 --> 00:04:08,599
is being used for this element.
95
00:04:08,678 --> 00:04:11,567
But here we can also click this little arrow,
96
00:04:11,567 --> 00:04:13,587
and it will show us where
97
00:04:13,587 --> 00:04:15,607
that CSS rule comes from.
98
00:04:15,688 --> 00:04:18,471
In this case, the "font-family" is
99
00:04:18,471 --> 00:04:21,093
set at the "html" element level.
100
00:04:21,175 --> 00:04:24,658
That's how Tailwind sets the default font.
101
00:04:24,658 --> 00:04:26,835
But it takes its value from
102
00:04:26,835 --> 00:04:29,013
the "--font-exo2" variable,
103
00:04:29,094 --> 00:04:32,381
that's defined by a separate CSS class.
104
00:04:32,381 --> 00:04:36,129
This is in fact the "exo2.variable" class
105
00:04:36,129 --> 00:04:38,857
that we add to the "html" element
106
00:04:38,857 --> 00:04:40,346
in our RootLayout.
107
00:04:40,428 --> 00:04:43,312
Anyway, this is how we can override
108
00:04:43,312 --> 00:04:45,455
the default Tailwind font:
109
00:04:45,538 --> 00:04:48,983
simply redefine the "sans" font family.
7887
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.