WEBVTT

00:00:00.120 --> 00:00:01.940
Hello, my friends, and welcome back.

00:00:01.970 --> 00:00:07.220
Today, we're going to learn how to install
custom fonts for our React Native project.

00:00:07.250 --> 00:00:11.320
We are exactly at the same point
where we left off the last time.

00:00:11.350 --> 00:00:13.600
I have my empty simulator here because

00:00:13.630 --> 00:00:19.500
of our setup in this application,
and I have my Metro Bundler running here.

00:00:19.530 --> 00:00:24.700
There comes a time in our project,
sometimes when we need custom fonts.

00:00:24.730 --> 00:00:26.980
For example, here in our design,

00:00:27.010 --> 00:00:31.500
we're given this font here that is not
something that usually comes

00:00:31.530 --> 00:00:35.800
with the operating systems,
whether it's macOS or Windows.

00:00:35.820 --> 00:00:40.100
We see that the font family
here is called Inter.

00:00:40.120 --> 00:00:43.360
Now to install this font,
the first thing that you're going to have

00:00:43.390 --> 00:00:48.403
to do is go to one of the most popular
websites that's called

00:00:48.603 --> 00:00:49.800
fonts.google.com.

00:00:49.830 --> 00:00:53.680
You're going to see this
in the resources folder as well.

00:00:53.710 --> 00:00:56.740
You can just navigate using that link.

00:00:56.770 --> 00:00:59.500
Here we're going to search for this font

00:00:59.530 --> 00:01:02.660
called Inter and it's going
to pop up right here.

00:01:02.680 --> 00:01:06.340
What we're going to have to do
is download this font family.

00:01:06.360 --> 00:01:08.640
Great.
It has been downloaded and here you're

00:01:08.670 --> 00:01:11.840
going to see what's placed
inside the Inter folder.

00:01:11.870 --> 00:01:18.260
Inside the static, we're going to be
given all the variations of Inter font.

00:01:18.290 --> 00:01:23.380
What that means is that each font
comes with different variations.

00:01:23.410 --> 00:01:26.570
You can see it here,
it gets bolder and bolder.

00:01:26.600 --> 00:01:30.120
So all of the files for that is
placed inside here.

00:01:30.150 --> 00:01:31.780
Here to handle those cases.

00:01:31.810 --> 00:01:36.240
What you're going to want to do is make
sure that Inter Font is installed for you.

00:01:36.270 --> 00:01:38.210
Just double-click on that.

00:01:38.240 --> 00:01:40.600
This is going to go through the validation

00:01:40.630 --> 00:01:43.290
process right now and I'm
going to click on Install.

00:01:43.320 --> 00:01:47.210
This process is very similar
on Windows Machine as well.

00:01:47.240 --> 00:01:49.000
The Install button is just going to be

00:01:49.030 --> 00:01:54.060
located somewhere in the top bar,
so look for that and click on Install.

00:01:54.090 --> 00:01:57.000
The Inter font should
be installed right now.

00:01:57.030 --> 00:02:01.100
I can look it up right here and I'm
going to be able to see it.

00:02:01.130 --> 00:02:02.080
That's great.

00:02:02.110 --> 00:02:05.020
We have installed it
on our operating system.

00:02:05.050 --> 00:02:11.500
The next thing to do is connect this
Inter font to our social media app.

00:02:11.530 --> 00:02:14.120
Now, to connect this font to our social

00:02:14.150 --> 00:02:19.480
media app, what you're going to have to do
is create a new file inside the root

00:02:19.510 --> 00:02:26.540
of social media app, and we're
going to call it react-nativeconfig.js.

00:02:26.570 --> 00:02:33.200
What we're going to do here is write some
code that will enable us to set up custom

00:02:33.230 --> 00:02:36.580
assets and connect this to our
React Native application.

00:02:36.610 --> 00:02:38.020
This code goes like this.

00:02:38.050 --> 00:02:41.940
We're going to have a module, which is
going to be an exportable module.

00:02:41.970 --> 00:02:43.940
We're going to say that here we have

00:02:43.970 --> 00:02:48.980
a project and it comes
with iOS and Android.

00:02:49.010 --> 00:02:51.640
Then we're going to have to set up a new

00:02:51.670 --> 00:02:56.640
attribute called asset here that's going
to be an array and it's going to take

00:02:56.670 --> 00:03:02.220
a path to the folder where
we have our custom assets.

00:03:02.250 --> 00:03:05.380
Now, we don't have a folder like
that created yet,

00:03:05.410 --> 00:03:09.340
so let's create that folder and we're
going to just call it assets.

00:03:09.370 --> 00:03:11.880
Then inside here, we're going to create

00:03:11.910 --> 00:03:15.020
another folder and we're
going to call it fonts.

00:03:15.050 --> 00:03:21.180
Inside here, we're going to place our
font files that we just downloaded.

00:03:21.210 --> 00:03:23.260
Just go to your inter folder,

00:03:23.290 --> 00:03:29.860
open up the Static folder, grab these
fonts and place it inside this folder.

00:03:29.880 --> 00:03:30.300
Great.

00:03:30.330 --> 00:03:34.680
These funds have been pasted
in my directory right now.

00:03:34.710 --> 00:03:38.760
All we need to do is say where
we're storing our assets.

00:03:38.790 --> 00:03:40.900
Actually, we need S here.

00:03:40.930 --> 00:03:49.380
Then here we're going to say that this
folder is inside assets fonts folder.

00:03:49.410 --> 00:03:53.540
We have the path defined right now
and to complete the setup,

00:03:53.570 --> 00:03:57.660
what we're going to have to do is run
a simple command that is going to take

00:03:57.690 --> 00:04:03.460
care of linking these files
to Android and iOS projects.

00:04:03.490 --> 00:04:09.046
For that, just open up your terminal
and here write

00:04:09.246 --> 00:04:11.660
npx react-native-asset

00:04:11.690 --> 00:04:15.610
then just click on Enter and run this.

00:04:15.640 --> 00:04:20.980
Now our TTF files are
linked to iOS and Android projects.

00:04:21.010 --> 00:04:25.880
If you want to check whether this went
successfully or not, for Android,

00:04:25.910 --> 00:04:29.180
you can open the Android
folder and then go to app.

00:04:29.200 --> 00:04:31.120
Then here you're going
to see the source folder.

00:04:31.150 --> 00:04:35.440
Just click on that and then click on main
and then click on assets and inside

00:04:35.470 --> 00:04:39.980
the funds folder, you're going
to see all of these fonts created.

00:04:40.010 --> 00:04:45.440
Now for iOS, you can just open the iOS
folder and then click on social media

00:04:45.470 --> 00:04:50.140
folder and inside the Info.plist file,
you're going to see these funds added.

00:04:50.160 --> 00:04:53.220
Everything should be
functioning okay right now.

00:04:53.250 --> 00:04:56.400
To check this, we're going to create a new

00:04:56.420 --> 00:04:59.880
text component and assign
the fund family to it.

00:04:59.910 --> 00:05:01.860
But before we do that,

00:05:01.890 --> 00:05:06.960
please close your Metro Bundler and
then rerun your application.

00:05:06.980 --> 00:05:11.220
Whether you're rerunning it on iOS
or Android, it doesn't matter.

00:05:11.250 --> 00:05:16.340
Just use Run iOS for iOS
and Run Android for Android.

00:05:16.360 --> 00:05:19.980
Click on Enter and
wait for this to complete.

00:05:20.010 --> 00:05:24.000
The Metro Bundler should open up again
and you're not going to see this warning

00:05:24.030 --> 00:05:29.060
here anymore because our Metro Bundler
is going to connect to our simulator.

00:05:29.090 --> 00:05:31.860
Great, the is successfully built.

00:05:31.890 --> 00:05:36.580
The Metro Bundler is already connected,
so now we can conduct our experiment.

00:05:36.600 --> 00:05:39.420
Let's import the text component here

00:05:39.450 --> 00:05:45.700
and then inside the safe area view,
we're going to place a text component.

00:05:45.730 --> 00:05:48.980
Here, let's just write Hello World.

00:05:49.010 --> 00:05:53.980
Now, we see the Hello World appear
here and let's assign some styles to it.

00:05:54.010 --> 00:05:56.800
Let's say that our font size is a little

00:05:56.830 --> 00:06:00.900
bit bigger, something like 50,
so that we see this clearly.

00:06:00.920 --> 00:06:05.740
What we're going to do here
is assign font family.

00:06:05.770 --> 00:06:10.140
We're going to use one
of the variations of our fonts.

00:06:10.170 --> 00:06:12.440
Let's use inter black and see.

00:06:12.470 --> 00:06:17.880
We're going to see how this looks
and we're going to see our font changed,

00:06:17.910 --> 00:06:21.260
meaning that our font
families are working.

00:06:21.290 --> 00:06:22.640
This is great.

00:06:22.670 --> 00:06:28.540
What I want to mention here right now is
what the variations of those fonts mean.

00:06:28.570 --> 00:06:36.100
As you know, the font weight property has
different values that it can use.

00:06:36.130 --> 00:06:41.160
It could either be normal,
which looks like this,

00:06:41.190 --> 00:06:43.840
or it could be bold,
which looks like this,

00:06:43.860 --> 00:06:49.520
or it could be a numeric value as well,
but it has to be a string here.

00:06:49.540 --> 00:06:56.360
It could be 100, which is very thin,
or 200, which is slightly a little bolder,

00:06:56.390 --> 00:07:02.060
and then 300, 400, 500,
and you understand how this goes.

00:07:02.090 --> 00:07:05.100
Now, what I want to mention is that

00:07:05.130 --> 00:07:11.860
the font family and font weight work
a little bit differently on Windows.

00:07:11.890 --> 00:07:15.580
Therefore, if you're working
in an environment or in a team where

00:07:15.600 --> 00:07:22.060
people have different operating systems,
you are going to need a specific setup to

00:07:22.090 --> 00:07:27.820
allow Windows users to also see this
font weight as they're expecting.

00:07:27.850 --> 00:07:30.360
For example, right now I'm running

00:07:30.390 --> 00:07:34.600
on macOS, and it doesn't matter
whether I use interblack here or not.

00:07:34.630 --> 00:07:38.760
If I delete this and just leave inter,
this font will stay the same.

00:07:38.760 --> 00:07:39.840
Nothing will change about it.

00:07:39.860 --> 00:07:43.220
But if someone who's running on Windows
does the same thing,

00:07:43.250 --> 00:07:49.020
they're going to see that font family
style changes and most probably falls back

00:07:49.040 --> 00:07:56.060
to the default font family that was used
on this emulator on the Windows machine.

00:07:56.090 --> 00:08:01.900
Therefore, if we want to make sure
that the font family and font weight is

00:08:01.920 --> 00:08:05.860
shown the same way on two different
operating systems,

00:08:05.880 --> 00:08:09.220
we're going to need to come up
with a function that takes care of that.

00:08:09.240 --> 00:08:11.040
It's going to be a very simple function.

00:08:11.070 --> 00:08:12.620
Let's just write it together.

00:08:12.640 --> 00:08:16.420
I'm going to place it inside the fonts
folder here because it just makes sense.

00:08:16.450 --> 00:08:18.480
I'm going to create a helper.

00:08:18.510 --> 00:08:23.500
Js file that we're going to use
to create an exportable function

00:08:23.530 --> 00:08:27.740
that takes care of this for both
of the operating systems.

00:08:27.770 --> 00:08:30.740
We're just going to call this get font

00:08:30.770 --> 00:08:35.500
family, and it's going
to take the name of the font.

00:08:35.530 --> 00:08:37.740
Let's call it base font.

00:08:37.770 --> 00:08:39.840
I'm just going to give it a default value

00:08:39.870 --> 00:08:45.040
of intro right now because that's the only
font that we're using that's custom.

00:08:45.060 --> 00:08:50.700
Then let's give it another
argument that's called weight.

00:08:50.730 --> 00:08:53.340
Let's create this function.

00:08:53.370 --> 00:08:55.960
What we're going to do here is write

00:08:55.990 --> 00:09:00.020
a switch statement which
takes in the weight.

00:09:00.040 --> 00:09:01.640
We're going to pass the weight and we're

00:09:01.670 --> 00:09:07.260
going to evaluate what is
this weight value equal to.

00:09:07.290 --> 00:09:11.040
Let's say that it is equal to 100.

00:09:11.060 --> 00:09:15.960
If that's the case, then we want to return

00:09:16.360 --> 00:09:25.660
a base font here,
and then thin variation of it.

00:09:25.690 --> 00:09:31.840
What this is going to do right now is grab
the value of the base font and add

00:09:31.870 --> 00:09:37.420
the variation to it if
the weight is equal to 100.

00:09:37.440 --> 00:09:43.700
If the weight is equal to 100,
we want to see a very thin font.

00:09:43.730 --> 00:09:48.600
Now we're going to do the same
for the other values and the values are

00:09:48.630 --> 00:09:54.540
ranging from 100 to 900
in increments of 100.

00:09:54.560 --> 00:09:59.300
Let's just copy and paste this
here a couple more times.

00:09:59.320 --> 00:10:01.760
Okay, and we're going to say what we want

00:10:01.790 --> 00:10:07.980
to do if the font is 200 or 300 or 400,

00:10:08.010 --> 00:10:14.220
500, 600, 700, 800 or 900.

00:10:14.250 --> 00:10:17.820
By the way, the weight can also be normal.

00:10:17.850 --> 00:10:20.740
Here we're going to add another case

00:10:20.770 --> 00:10:26.940
that is normal because the normal font
weight is equal to 400, actually.

00:10:26.970 --> 00:10:30.160
We're going to place the bold right above

00:10:30.190 --> 00:10:38.020
the 700 because that is what
the bold is equal to.

00:10:38.040 --> 00:10:38.860
Great.

00:10:38.890 --> 00:10:43.460
This is set up the right way, but we
need to change the variations here.

00:10:43.490 --> 00:10:46.220
This is going to be extra light

00:10:46.250 --> 00:10:56.660
and this is going to be light and regular
and medium and then semi-bold.

00:10:56.690 --> 00:10:59.100
Here we're going to use bold,

00:10:59.130 --> 00:11:04.300
and here we're going to use extra bold,
and then here we're going to use black.

00:11:04.330 --> 00:11:07.480
Note that these names will come up to be

00:11:07.510 --> 00:11:11.460
equal to the same names
that are listed right here.

00:11:11.490 --> 00:11:14.180
We're also going to have a default case

00:11:14.210 --> 00:11:20.460
where we're going to return something in
case none of these cases were met above.

00:11:20.490 --> 00:11:28.620
We're going to say that the default value
is going to be base font regular.

00:11:28.650 --> 00:11:29.780
Great.

00:11:29.810 --> 00:11:31.680
Let's save this.

00:11:31.880 --> 00:11:36.140
Now let's say that we want
to use this function.

00:11:36.160 --> 00:11:37.600
What we're going to have to do is delete

00:11:37.630 --> 00:11:41.040
this part and use
the getFontFamily function.

00:11:41.070 --> 00:11:43.540
Let's make sure that we import this.

00:11:43.570 --> 00:11:45.940
Then we're going to say that our font

00:11:45.970 --> 00:11:51.380
family is inter and we
want to get weight of 500.

00:11:51.410 --> 00:11:54.340
Please make sure that you
use a string here.

00:11:54.360 --> 00:11:55.840
Then let's save this and you're going

00:11:55.870 --> 00:11:58.720
to see that nothing really
changed about our font.

00:11:58.750 --> 00:12:03.420
If I use 100, it's
going to grab the font that we need.

00:12:03.450 --> 00:12:07.240
This is how you make sure that the font

00:12:07.270 --> 00:12:13.280
family works properly both for Windows
operating system and for macOS.

00:12:13.310 --> 00:12:18.760
This is something good to know whether
you're running on macOS or Windows because

00:12:18.760 --> 00:12:21.980
if you're going to be in a professional
environment where you're going to have

00:12:22.010 --> 00:12:26.960
to add a custom font to the project,
you want to make sure that everybody

00:12:26.990 --> 00:12:32.820
on the team can run and use
font Family in the same way.

00:12:32.850 --> 00:12:36.500
That's it about the custom
font installation.

00:12:36.530 --> 00:12:38.540
Hope you enjoyed this lesson.

00:12:38.570 --> 00:12:39.680
In the next lecture,

00:12:39.710 --> 00:12:44.980
we're going to start creating our
social media applications components.

00:12:45.010 --> 00:12:46.180
I'll see you there.

00:12:46.200 --> 00:12:47.880
Stay tuned and thanks
so much for watching.