All language subtitles for 005 Exercise Custom Default Font_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranรฎ)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.