Hi, everyone, and welcome back.
In this video, I just want to talk about
something important specifically for this section.
This is a video that I added after
the initial videos that were created for this course.
I just want to talk to the macOS users of this course.
You might notice the way we use fonts here
is a bit different from the social media app project that we worked on together.
The main difference is going to be
regarding how the font family and font weights are handled inside this section.
As you know, we did create a function
called get font family inside the social media project that is actually going to be
missing from this donation application project.
I just want to explain why.
This is because that I actually re-recorded the whole social media app
project sections for supporting the Windows users.
I added this function in the social media app because I wanted to ensure
that Windows users would not face any issues with the custom fonts,
but Windows operating system originally was not supported in this course.
Now, re-recording the social media app project was pretty simple,
but there are priorities on what I might want to add to this course according
to the feedback that I'm getting from students.
Therefore, I decided that re-recording
the donation app project, which is something that we're going to be
referring to a lot in this section, would take a lot of time,
and I should also be thinking about some of the items that macOS users might need.
Therefore, this video is created to support Windows users and for macOS
users to understand what is going to be the difference between
the previous social media app project and this one.
Now, macOS users, you might want to watch this video or you can skip it.
If you decide to watch it,
you might understand that you could write the font family styles a bit differently.
But if you decide to skip and just follow
along the videos, you're just going to be fine.
You can write exactly the same code as
written in those videos and you're going to see no issues.
Now, if you're using Windows,
I really think that you should watch this whole video.
It will help you know what changes to make
so that you don't have any problems with the custom fonts in the upcoming videos.
Let's get started.
Here you see that I have just app.js file open.
I'm just going to create a new text
component here, and I'm going to ensure that this is imported for me here.
What I'm going to do is just write Hello World here.
I'm going to give it some styles.
I'm going to say that first of all, it has a font size of 70.
Here's how our Hello World appears right now.
If I were to write another style here and say that my font family is inter,
on macOS, you will see no issues with this.
You will actually see that our font changed.
But on Windows, you might experience no
font family change, which is why I'm recording this video.
Previously in the social media project, what you saw is that if we wanted to use
a specific font weight, let's say 400, right?
I mean, 400 is actually the default one.
Why don't I use 700?
You would see me write the same styles as Get Font Family, and then we would pass
that we want the inter font family and that our font weight is 700.
However, in this section, you're actually going to see that I will
just directly be using the font family, inter, and font weight.
If you're on MacOS, this is totally fine.
If you're on Windows,
this is not fine and you will still need the getFontFamily function.
We're just going to write it again together.
Then, Windows users, if you see me writing, font weight
styles, and font family styles like this in the upcoming videos.
Just make sure to skip the font weight property in the styles and directly
use the getFontFamily function with inter and 700 given here.
We're going to design this function right now.
To do this, we're just going to go to the assets folder and inside the fonts
folder, we're going to create a new file and we're going to call it helper.js.
Let me zoom in a bit.
Then I'm going to create an exportable
constant here that is going to be called getFontFamily, and it's going to have
the base font argument that is by default is going to be set to inter,
and it's also going to have the weight property and this will have no default
but we are going to have a default fallback option.
Let's start designing this function.
We're going to need a switch statement here and we're going to use a switch
on the weight property that is going to be passed to this function.
Oops, I missed an arrow here.
Make sure that you have that.
Let me save this real quick
and let me make sure that this get font family is imported right here.
Here, so that we have no errors.
Then what we're going to do is write cases
that would match the weight passed by you when using the get font family function.
You know that we are going to start
with 100 because this is the least number that could be used for the weight.
Here, we're going to use a return
statement with a bit different backticks here.
Note that these are a bit different than what's given here.
We're going to say that we're going to use the base font as a variable.
For matching the 100,
we're going to need to match this TTF file here given, Inter Thin.
I'm just going to say that we need the thin here.
Then I'm going to copy this and I'm going to paste it.
For 200, I'm going to say that we are going to need the extra light one.
For 300, we're going to need the light one.
For 400, we're going to need the regular one.
We're also going to create another case
that could match the regular font weight, which would be normal.
We can just continue with the numbers right now.
Let me just make sure to delete this one.
Then let's paste this again and change this to 500.
For 500, we're going to use the semi-bold one.
For 600, we're going to use the...
Actually, we should use the medium for 500, and we should use semi-bold for 600.
For 700, we're just going to use bold one.
For 700, we're also going to use a case called bold.
If you were to pass in bold or normal
instead of the numbers inside the weight property, this would work.
Now let's create the one for 800 as well.
This would be extra bold.
For 900, we would just use black.
Now, we also need a default case.
If the user passes weight that is not
matching any of these items, we're just going to return the regular font.
Great.
You saw that this changed back to the bold item because we used 700 right here.
If I were to pass native,
the custom font still would work, but it would fall back to the regular option.
If I were to change Nata to 400, you will see no difference in here.
This is what Windows users will have to use instead of font family directly
being set to inter and font weight directly said.
Thank you so much for watching.
I hope that Windows users will understand what changes to make to the code that's
going to be presented in the upcoming videos,
and that the MacOS users understand why the getFontFamily function is
something that you're not going to see in the upcoming videos.
Thanks again and I'll see you in the next video.