WEBVTT 00:00:00.160 --> 00:00:02.260 Hi, everyone, and welcome back. 00:00:02.280 --> 00:00:03.920 In this video, I just want to talk about 00:00:03.950 --> 00:00:06.980 something important specifically for this section. 00:00:07.010 --> 00:00:09.680 This is a video that I added after 00:00:09.710 --> 00:00:13.340 the initial videos that were created for this course. 00:00:13.370 --> 00:00:18.100 I just want to talk to the macOS users of this course. 00:00:18.130 --> 00:00:20.520 You might notice the way we use fonts here 00:00:20.550 --> 00:00:24.780 is a bit different from the social media app project that we worked on together. 00:00:24.810 --> 00:00:26.520 The main difference is going to be 00:00:26.550 --> 00:00:31.820 regarding how the font family and font weights are handled inside this section. 00:00:31.850 --> 00:00:34.140 As you know, we did create a function 00:00:34.170 --> 00:00:39.200 called get font family inside the social media project that is actually going to be 00:00:39.230 --> 00:00:43.620 missing from this donation application project. 00:00:43.650 --> 00:00:45.620 I just want to explain why. 00:00:45.650 --> 00:00:50.420 This is because that I actually re-recorded the whole social media app 00:00:50.450 --> 00:00:54.800 project sections for supporting the Windows users. 00:00:54.830 --> 00:01:00.000 I added this function in the social media app because I wanted to ensure 00:01:00.030 --> 00:01:04.180 that Windows users would not face any issues with the custom fonts, 00:01:04.210 --> 00:01:10.130 but Windows operating system originally was not supported in this course. 00:01:10.160 --> 00:01:13.400 Now, re-recording the social media app project was pretty simple, 00:01:13.430 --> 00:01:18.280 but there are priorities on what I might want to add to this course according 00:01:18.310 --> 00:01:21.460 to the feedback that I'm getting from students. 00:01:21.490 --> 00:01:24.240 Therefore, I decided that re-recording 00:01:24.240 --> 00:01:27.400 the donation app project, which is something that we're going to be 00:01:27.430 --> 00:01:31.620 referring to a lot in this section, would take a lot of time, 00:01:31.650 --> 00:01:37.820 and I should also be thinking about some of the items that macOS users might need. 00:01:37.850 --> 00:01:43.440 Therefore, this video is created to support Windows users and for macOS 00:01:43.470 --> 00:01:47.200 users to understand what is going to be the difference between 00:01:47.230 --> 00:01:51.210 the previous social media app project and this one. 00:01:51.240 --> 00:01:57.020 Now, macOS users, you might want to watch this video or you can skip it. 00:01:57.050 --> 00:01:58.400 If you decide to watch it, 00:01:58.430 --> 00:02:04.020 you might understand that you could write the font family styles a bit differently. 00:02:04.050 --> 00:02:06.240 But if you decide to skip and just follow 00:02:06.270 --> 00:02:09.080 along the videos, you're just going to be fine. 00:02:09.110 --> 00:02:11.540 You can write exactly the same code as 00:02:11.570 --> 00:02:14.860 written in those videos and you're going to see no issues. 00:02:14.890 --> 00:02:16.880 Now, if you're using Windows, 00:02:16.910 --> 00:02:20.100 I really think that you should watch this whole video. 00:02:20.130 --> 00:02:22.440 It will help you know what changes to make 00:02:22.470 --> 00:02:28.300 so that you don't have any problems with the custom fonts in the upcoming videos. 00:02:28.330 --> 00:02:29.480 Let's get started. 00:02:29.510 --> 00:02:32.760 Here you see that I have just app.js file open. 00:02:32.790 --> 00:02:35.940 I'm just going to create a new text 00:02:35.970 --> 00:02:40.890 component here, and I'm going to ensure that this is imported for me here. 00:02:40.920 --> 00:02:45.860 What I'm going to do is just write Hello World here. 00:02:45.890 --> 00:02:48.180 I'm going to give it some styles. 00:02:48.210 --> 00:02:53.580 I'm going to say that first of all, it has a font size of 70. 00:02:53.610 --> 00:02:57.260 Here's how our Hello World appears right now. 00:02:57.290 --> 00:03:05.100 If I were to write another style here and say that my font family is inter, 00:03:05.130 --> 00:03:08.440 on macOS, you will see no issues with this. 00:03:08.470 --> 00:03:11.500 You will actually see that our font changed. 00:03:11.530 --> 00:03:14.920 But on Windows, you might experience no 00:03:14.950 --> 00:03:19.180 font family change, which is why I'm recording this video. 00:03:19.210 --> 00:03:25.000 Previously in the social media project, what you saw is that if we wanted to use 00:03:25.030 --> 00:03:30.610 a specific font weight, let's say 400, right? 00:03:30.640 --> 00:03:33.720 I mean, 400 is actually the default one. 00:03:33.750 --> 00:03:37.240 Why don't I use 700? 00:03:37.760 --> 00:03:44.160 You would see me write the same styles as Get Font Family, and then we would pass 00:03:44.190 --> 00:03:50.100 that we want the inter font family and that our font weight is 700. 00:03:50.130 --> 00:03:54.640 However, in this section, you're actually going to see that I will 00:03:54.670 --> 00:03:58.860 just directly be using the font family, inter, and font weight. 00:03:58.890 --> 00:04:01.500 If you're on MacOS, this is totally fine. 00:04:01.530 --> 00:04:02.820 If you're on Windows, 00:04:02.850 --> 00:04:06.580 this is not fine and you will still need the getFontFamily function. 00:04:06.610 --> 00:04:09.420 We're just going to write it again together. 00:04:09.450 --> 00:04:13.460 Then, Windows users, if you see me writing, font weight 00:04:13.490 --> 00:04:17.700 styles, and font family styles like this in the upcoming videos. 00:04:17.720 --> 00:04:22.660 Just make sure to skip the font weight property in the styles and directly 00:04:22.690 --> 00:04:29.340 use the getFontFamily function with inter and 700 given here. 00:04:29.360 --> 00:04:32.320 We're going to design this function right now. 00:04:32.320 --> 00:04:38.420 To do this, we're just going to go to the assets folder and inside the fonts 00:04:38.450 --> 00:04:44.020 folder, we're going to create a new file and we're going to call it helper.js. 00:04:44.040 --> 00:04:46.220 Let me zoom in a bit. 00:04:46.250 --> 00:04:48.760 Then I'm going to create an exportable 00:04:48.780 --> 00:04:53.040 constant here that is going to be called getFontFamily, and it's going to have 00:04:53.070 --> 00:04:58.420 the base font argument that is by default is going to be set to inter, 00:04:58.450 --> 00:05:04.880 and it's also going to have the weight property and this will have no default 00:05:04.910 --> 00:05:08.940 but we are going to have a default fallback option. 00:05:08.970 --> 00:05:11.940 Let's start designing this function. 00:05:11.970 --> 00:05:16.560 We're going to need a switch statement here and we're going to use a switch 00:05:16.590 --> 00:05:20.220 on the weight property that is going to be passed to this function. 00:05:20.250 --> 00:05:21.920 Oops, I missed an arrow here. 00:05:21.950 --> 00:05:23.940 Make sure that you have that. 00:05:23.970 --> 00:05:25.780 Let me save this real quick 00:05:25.800 --> 00:05:29.960 and let me make sure that this get font family is imported right here. 00:05:29.980 --> 00:05:32.220 Here, so that we have no errors. 00:05:32.250 --> 00:05:34.800 Then what we're going to do is write cases 00:05:34.830 --> 00:05:40.480 that would match the weight passed by you when using the get font family function. 00:05:40.510 --> 00:05:43.280 You know that we are going to start 00:05:43.300 --> 00:05:48.020 with 100 because this is the least number that could be used for the weight. 00:05:48.040 --> 00:05:49.980 Here, we're going to use a return 00:05:50.010 --> 00:05:53.580 statement with a bit different backticks here. 00:05:53.600 --> 00:05:56.580 Note that these are a bit different than what's given here. 00:05:56.600 --> 00:06:00.860 We're going to say that we're going to use the base font as a variable. 00:06:00.890 --> 00:06:02.440 For matching the 100, 00:06:02.470 --> 00:06:07.980 we're going to need to match this TTF file here given, Inter Thin. 00:06:08.010 --> 00:06:11.020 I'm just going to say that we need the thin here. 00:06:11.040 --> 00:06:14.860 Then I'm going to copy this and I'm going to paste it. 00:06:14.890 --> 00:06:19.900 For 200, I'm going to say that we are going to need the extra light one. 00:06:19.920 --> 00:06:25.460 For 300, we're going to need the light one. 00:06:25.480 --> 00:06:29.760 For 400, we're going to need the regular one. 00:06:29.790 --> 00:06:32.280 We're also going to create another case 00:06:32.300 --> 00:06:37.580 that could match the regular font weight, which would be normal. 00:06:37.600 --> 00:06:40.800 We can just continue with the numbers right now. 00:06:40.830 --> 00:06:43.100 Let me just make sure to delete this one. 00:06:43.130 --> 00:06:47.740 Then let's paste this again and change this to 500. 00:06:47.770 --> 00:06:51.780 For 500, we're going to use the semi-bold one. 00:06:51.800 --> 00:06:55.700 For 600, we're going to use the... 00:06:55.730 --> 00:07:01.580 Actually, we should use the medium for 500, and we should use semi-bold for 600. 00:07:01.600 --> 00:07:06.660 For 700, we're just going to use bold one. 00:07:06.690 --> 00:07:11.500 For 700, we're also going to use a case called bold. 00:07:11.530 --> 00:07:14.180 If you were to pass in bold or normal 00:07:14.210 --> 00:07:20.380 instead of the numbers inside the weight property, this would work. 00:07:20.410 --> 00:07:23.880 Now let's create the one for 800 as well. 00:07:23.910 --> 00:07:26.540 This would be extra bold. 00:07:26.570 --> 00:07:31.740 For 900, we would just use black. 00:07:31.770 --> 00:07:33.600 Now, we also need a default case. 00:07:33.630 --> 00:07:37.160 If the user passes weight that is not 00:07:37.190 --> 00:07:43.700 matching any of these items, we're just going to return the regular font. 00:07:43.720 --> 00:07:44.820 Great. 00:07:44.850 --> 00:07:52.640 You saw that this changed back to the bold item because we used 700 right here. 00:07:52.670 --> 00:07:54.380 If I were to pass native, 00:07:54.410 --> 00:08:00.420 the custom font still would work, but it would fall back to the regular option. 00:08:00.450 --> 00:08:05.540 If I were to change Nata to 400, you will see no difference in here. 00:08:05.570 --> 00:08:11.400 This is what Windows users will have to use instead of font family directly 00:08:11.420 --> 00:08:15.020 being set to inter and font weight directly said. 00:08:15.040 --> 00:08:16.560 Thank you so much for watching. 00:08:16.590 --> 00:08:21.260 I hope that Windows users will understand what changes to make to the code that's 00:08:21.290 --> 00:08:24.580 going to be presented in the upcoming videos, 00:08:24.600 --> 00:08:29.620 and that the MacOS users understand why the getFontFamily function is 00:08:29.650 --> 00:08:33.980 something that you're not going to see in the upcoming videos. 00:08:34.010 --> 00:08:36.760 Thanks again and I'll see you in the next video.