1
00:00:02,190 --> 00:00:06,450
Now we added fonts multiple times in this course already, so it's not too new

2
00:00:06,450 --> 00:00:12,780
how this works. In the assets folder, I'll add a fonts folder but again, you can store them wherever you want. Attached

3
00:00:12,780 --> 00:00:15,470
you find the two fonts we've been using throughout the course,

4
00:00:15,480 --> 00:00:17,550
open sans bold and regular

5
00:00:17,550 --> 00:00:22,690
and now we have to load them when the app starts in the app.js file. There,

6
00:00:23,100 --> 00:00:34,690
you now can import something from expo and that something is the app loading component and you also need

7
00:00:34,690 --> 00:00:42,310
to import star as font from expo-font and to make sure that this is available, run npm install

8
00:00:42,340 --> 00:00:49,870
--save expo-font to install this into your project and ensure that you can use it.

9
00:00:49,890 --> 00:00:53,760
Now these are the two things you need to install there and with that installed,

10
00:00:53,770 --> 00:00:58,620
we can add a new function here, maybe name it fetch fonts.

11
00:00:58,640 --> 00:01:07,690
This is a function which in the end takes no arguments but in there, I can now call font load async

12
00:01:08,200 --> 00:01:13,510
and return that because that returns a promise and fetch fonts should return a promise and there

13
00:01:13,510 --> 00:01:18,910
pass in a Javascript object where we map the fonts we want to load and then I'll have open-sans

14
00:01:18,940 --> 00:01:25,560
which I map to my require import here where I point at the assets folder, fonts folder and that open-sans

15
00:01:25,560 --> 00:01:38,020
regular and also add open-sans-bold here as a key and map that to require/assets

16
00:01:38,080 --> 00:01:45,560
/fonts/open-sans-bold so that both fonts are imported here.

17
00:01:45,580 --> 00:01:51,230
Now fetch fonts of course needs to be called and that should be called by our app loading component,

18
00:01:51,370 --> 00:01:56,800
hence we also need to import the use state from React, so that we can control whether the data has been

19
00:01:56,800 --> 00:01:57,990
loaded yet or not

20
00:01:58,240 --> 00:02:06,430
so that in the functional component here, we can have our font loaded state and set font loaded and initially

21
00:02:06,430 --> 00:02:09,080
with use state, that is false.

22
00:02:09,250 --> 00:02:13,190
If that should be true, I want to render this output,

23
00:02:13,270 --> 00:02:18,970
therefore as long as it is false, hence the exclamation mark here, I want to instead return the app loading

24
00:02:18,970 --> 00:02:25,210
component which prolongs our loading, our startup screen and there, we need to provide these start async

25
00:02:25,930 --> 00:02:30,850
prop which points at the fetch fonts function which is the function which is executed when this component

26
00:02:30,850 --> 00:02:37,350
is first rendered and then on finish which executes a function once this loading is done and in this

27
00:02:37,350 --> 00:02:38,830
function that is to be executed,

28
00:02:38,830 --> 00:02:45,890
I'll set my font loaded to true so that we no longer render app loading but instead, we render this content.

29
00:02:46,000 --> 00:02:51,490
Now our fonts get loaded and now we can use them and I want to use them in two places - 

30
00:02:51,520 --> 00:02:58,030
my product item which is the component we render on the products overview. There of course we have

31
00:02:58,030 --> 00:03:06,340
some text, we have our title and we have our price here and it's there where on the title, I also want

32
00:03:06,340 --> 00:03:12,760
to set a font family of open-sans-bold and on the price,

33
00:03:12,760 --> 00:03:20,020
I also want to set a font family of open-sans and on the product detail screen, it's the

34
00:03:20,020 --> 00:03:29,080
same. The price should maybe get a font family of open-sans-bold to have that bold style and

35
00:03:29,080 --> 00:03:33,310
the description will just get the open sans font.

36
00:03:33,490 --> 00:03:40,880
Now that's not all actually, in the shop navigator in my main navigator here, in the default navigation

37
00:03:40,880 --> 00:03:41,880
options,

38
00:03:41,900 --> 00:03:51,520
I also want to use that font in the header, so the header title style here should actually be an object

39
00:03:51,520 --> 00:04:01,360
where I set the font family to open-sans-bold to use the bold open sans font there and the

40
00:04:01,510 --> 00:04:09,600
header back title style defines how that back text which we see on iOS is styled this and that should also

41
00:04:09,600 --> 00:04:17,120
use a font family of open-sans though, not the bold version. With that if we now save this and this reloads,

42
00:04:17,860 --> 00:04:23,060
we can see our own font is getting used. Now we also see that here on iOS, our title is therefore

43
00:04:23,110 --> 00:04:29,330
cut off, that's something we'll have to fix but in general, this now looks the way it should look. Now

44
00:04:29,350 --> 00:04:37,010
let's make sure that title being cut off is fixed and for that in the product item here, which is where

45
00:04:37,010 --> 00:04:47,340
we have that title, here this title should maybe have a reduced margin vertical of only 2 because I still

46
00:04:47,340 --> 00:04:53,800
like that distance and now the 15% of height we give to the title and the price suffice to share this

47
00:04:53,880 --> 00:04:57,390
and therefore now this looks the way it should look.

48
00:04:57,660 --> 00:05:01,540
Now we're using the custom font, we can go to the details page,

49
00:05:01,710 --> 00:05:06,750
I'd say it's now really time to also make sure that we can add items to the cart and we therefore make

50
00:05:06,750 --> 00:05:08,340
this to cart button work.