Hello, my friends, and welcome back.
Today, we're going to learn how to install custom fonts for our React Native project.
We are exactly at the same point where we left off the last time.
I have my empty simulator here because
of our setup in this application, and I have my Metro Bundler running here.
There comes a time in our project, sometimes when we need custom fonts.
For example, here in our design,
we're given this font here that is not something that usually comes
with the operating systems, whether it's macOS or Windows.
We see that the font family here is called Inter.
Now to install this font, the first thing that you're going to have
to do is go to one of the most popular websites that's called
fonts.google.com.
You're going to see this in the resources folder as well.
You can just navigate using that link.
Here we're going to search for this font
called Inter and it's going to pop up right here.
What we're going to have to do is download this font family.
Great. It has been downloaded and here you're
going to see what's placed inside the Inter folder.
Inside the static, we're going to be given all the variations of Inter font.
What that means is that each font comes with different variations.
You can see it here, it gets bolder and bolder.
So all of the files for that is placed inside here.
Here to handle those cases.
What you're going to want to do is make sure that Inter Font is installed for you.
Just double-click on that.
This is going to go through the validation
process right now and I'm going to click on Install.
This process is very similar on Windows Machine as well.
The Install button is just going to be
located somewhere in the top bar, so look for that and click on Install.
The Inter font should be installed right now.
I can look it up right here and I'm going to be able to see it.
That's great.
We have installed it on our operating system.
The next thing to do is connect this Inter font to our social media app.
Now, to connect this font to our social
media app, what you're going to have to do is create a new file inside the root
of social media app, and we're going to call it react-nativeconfig.js.
What we're going to do here is write some code that will enable us to set up custom
assets and connect this to our React Native application.
This code goes like this.
We're going to have a module, which is going to be an exportable module.
We're going to say that here we have
a project and it comes with iOS and Android.
Then we're going to have to set up a new
attribute called asset here that's going to be an array and it's going to take
a path to the folder where we have our custom assets.
Now, we don't have a folder like that created yet,
so let's create that folder and we're going to just call it assets.
Then inside here, we're going to create
another folder and we're going to call it fonts.
Inside here, we're going to place our font files that we just downloaded.
Just go to your inter folder,
open up the Static folder, grab these fonts and place it inside this folder.
Great.
These funds have been pasted in my directory right now.
All we need to do is say where we're storing our assets.
Actually, we need S here.
Then here we're going to say that this folder is inside assets fonts folder.
We have the path defined right now and to complete the setup,
what we're going to have to do is run a simple command that is going to take
care of linking these files to Android and iOS projects.
For that, just open up your terminal and here write
npx react-native-asset
then just click on Enter and run this.
Now our TTF files are linked to iOS and Android projects.
If you want to check whether this went successfully or not, for Android,
you can open the Android folder and then go to app.
Then here you're going to see the source folder.
Just click on that and then click on main and then click on assets and inside
the funds folder, you're going to see all of these fonts created.
Now for iOS, you can just open the iOS folder and then click on social media
folder and inside the Info.plist file, you're going to see these funds added.
Everything should be functioning okay right now.
To check this, we're going to create a new
text component and assign the fund family to it.
But before we do that,
please close your Metro Bundler and then rerun your application.
Whether you're rerunning it on iOS or Android, it doesn't matter.
Just use Run iOS for iOS and Run Android for Android.
Click on Enter and wait for this to complete.
The Metro Bundler should open up again and you're not going to see this warning
here anymore because our Metro Bundler is going to connect to our simulator.
Great, the is successfully built.
The Metro Bundler is already connected, so now we can conduct our experiment.
Let's import the text component here
and then inside the safe area view, we're going to place a text component.
Here, let's just write Hello World.
Now, we see the Hello World appear here and let's assign some styles to it.
Let's say that our font size is a little
bit bigger, something like 50, so that we see this clearly.
What we're going to do here is assign font family.
We're going to use one of the variations of our fonts.
Let's use inter black and see.
We're going to see how this looks and we're going to see our font changed,
meaning that our font families are working.
This is great.
What I want to mention here right now is what the variations of those fonts mean.
As you know, the font weight property has different values that it can use.
It could either be normal, which looks like this,
or it could be bold, which looks like this,
or it could be a numeric value as well, but it has to be a string here.
It could be 100, which is very thin, or 200, which is slightly a little bolder,
and then 300, 400, 500, and you understand how this goes.
Now, what I want to mention is that
the font family and font weight work a little bit differently on Windows.
Therefore, if you're working in an environment or in a team where
people have different operating systems, you are going to need a specific setup to
allow Windows users to also see this font weight as they're expecting.
For example, right now I'm running
on macOS, and it doesn't matter whether I use interblack here or not.
If I delete this and just leave inter, this font will stay the same.
Nothing will change about it.
But if someone who's running on Windows does the same thing,
they're going to see that font family style changes and most probably falls back
to the default font family that was used on this emulator on the Windows machine.
Therefore, if we want to make sure that the font family and font weight is
shown the same way on two different operating systems,
we're going to need to come up with a function that takes care of that.
It's going to be a very simple function.
Let's just write it together.
I'm going to place it inside the fonts folder here because it just makes sense.
I'm going to create a helper.
Js file that we're going to use to create an exportable function
that takes care of this for both of the operating systems.
We're just going to call this get font
family, and it's going to take the name of the font.
Let's call it base font.
I'm just going to give it a default value
of intro right now because that's the only font that we're using that's custom.
Then let's give it another argument that's called weight.
Let's create this function.
What we're going to do here is write
a switch statement which takes in the weight.
We're going to pass the weight and we're
going to evaluate what is this weight value equal to.
Let's say that it is equal to 100.
If that's the case, then we want to return
a base font here, and then thin variation of it.
What this is going to do right now is grab the value of the base font and add
the variation to it if the weight is equal to 100.
If the weight is equal to 100, we want to see a very thin font.
Now we're going to do the same for the other values and the values are
ranging from 100 to 900 in increments of 100.
Let's just copy and paste this here a couple more times.
Okay, and we're going to say what we want
to do if the font is 200 or 300 or 400,
500, 600, 700, 800 or 900.
By the way, the weight can also be normal.
Here we're going to add another case
that is normal because the normal font weight is equal to 400, actually.
We're going to place the bold right above
the 700 because that is what the bold is equal to.
Great.
This is set up the right way, but we need to change the variations here.
This is going to be extra light
and this is going to be light and regular and medium and then semi-bold.
Here we're going to use bold,
and here we're going to use extra bold, and then here we're going to use black.
Note that these names will come up to be
equal to the same names that are listed right here.
We're also going to have a default case
where we're going to return something in case none of these cases were met above.
We're going to say that the default value is going to be base font regular.
Great.
Let's save this.
Now let's say that we want to use this function.
What we're going to have to do is delete
this part and use the getFontFamily function.
Let's make sure that we import this.
Then we're going to say that our font
family is inter and we want to get weight of 500.
Please make sure that you use a string here.
Then let's save this and you're going
to see that nothing really changed about our font.
If I use 100, it's going to grab the font that we need.
This is how you make sure that the font
family works properly both for Windows operating system and for macOS.
This is something good to know whether you're running on macOS or Windows because
if you're going to be in a professional environment where you're going to have
to add a custom font to the project, you want to make sure that everybody
on the team can run and use font Family in the same way.
That's it about the custom font installation.
Hope you enjoyed this lesson.
In the next lecture,
we're going to start creating our social media applications components.
I'll see you there.
Stay tuned and thanks so much for watching.