Custom Fonts

[00:00:00]
>> Next up let's talk about adding custom fonts, so when you're building an app for a client or company you work for more often than not you will have a custom font that they'll want you to use. So let's look at add how you would add custom fonts to your React Native app.

[00:00:16]
So for free funds, if you want to just add something to your own personal app, google funds is a really nice resource, you can explore different funds. You can look at which languages they support and how many styles they have. But this exercise I have chosen a font for us, so this one is called column.

[00:00:38]
The main reason I chose it is because it's a handwriting font so be super distinctive, once we add it. So here it will also show you which versions, which styles of the font, this includes, so this has a light medium and a bold version. So if you want to choose a different font, make sure that it has at least a regular and a bold version, because those are the two we're currently using in our app.

[00:01:04]
So, in this page if we go to download font family. Open it, and unzip it. Okay, so we see we get bold, regular and light. So, here's an interesting thing with fonts with React Native, IOS and Android treat font differently. So for android, we can use the actual file name as the font family, and it will just work, on iOS this doesn't work, because the iOS users the PostScript name of the fund.

[00:01:39]
So if I, for example, if I double click this to install the font on my Mac, so we're going so font. And here do opens in a font book, you can see that it has a postscript name which is called column regular. Now if I was to rename this file, this postscript name won't change so on IOS the font would never load.

[00:02:01]
So when you're adding fonts, to your app, if you're also supporting iOS, make sure that you check that the postscript name, is the same as the file name. This is to ensure that your fonts will work on both iOS and Android, 99% of the time, this will already be the case, but sometimes when you get assets from clients, they will have renamed that file.

[00:02:22]
So they don't match. So that's something to watch out for. All right, so in our app, let's go to our assets directory, and let's create a new folder and let's call it funds. Yeah. And we want to drag these fonts into our fonts directory, so let me just open with terminal.

[00:03:10]
So I wanna drag them in here. [COUGH] Cool, so all our fonts are in here. Now the next thing is you want to, link these fonts within our native applications. So we need to create a new file called React Native config.js. So this will be at the very root level of your application, so we'll do a new file React Native contact.js.

[00:03:48]
And in here we'll do module exports and we just want to give it the assets directory and link it to where our fonts are. So for copy this. So, we'll do modular exports, assets which is an array and then this will link to, will be a path to our fonts directory which is here assets and fonts.

[00:04:13]
The last thing you need to do is open a terminal and run MPX React Native link. So what this does is links those funds, copies those funds to your Xcode and your Android project, so actually if we look at the diff in our checkpoint. You will see that we added the fonts just to this assets directory but because we ran React Native link, these get copied here to Android.

[00:04:55]
So it creates an SSH directory on Android in the right place, and they also get added separately to iOS. So here we've got the resources section and these are the fonts. So this is what the React Native link command does behind the scenes. And lastly, because we have added something to our native directories we need to rebuild our apps, so let's run Yan iOS And also rebuild our Android project Now, the way you use custom funds is if you remember from earlier, we added this theme file where we want to store all of our app themes, anything to do with styling.

[00:06:05]
So I usually add the font families to the theme file as well, so if I copy this and open themes. At the end we just have color, you can do coz. Once and these are the font families that we can use so we've got a ball with regular load one.

[00:06:33]
I'm just gonna wait for the bill to finish. Excellent, so now our app has been built. So, let's just go to our mood picker, and that's fine where we have text, okay. So we have, the how are you right now, which is a heading, and here we can do fun to family.

[00:06:59]
Should be theme, dots, font family regular, actually we'll do font family bold. Font family bold, and you can see it's updated. And now we can remove this bolt from here. So this metadata like it is part of the font family, metadata as well but again because of the inconsistency with some of the fonts that you receive, I like to set it explicitly in the font family level.

[00:07:38]
And let's change all the other ones so we've got a button text, size, do font family. Theme and family bold. Then we have this description text. On the theme, on travel to bold. Then we got the button. And okay, so we've got this heading here as well. So the way you do heading text is if we go to the bottom tabs navigator, in the screen options, we have a tab bar item style, label style and this will be just a style object.

[00:08:39]
So I think if I did color. It would go to pink. Not the tab bar, I think we have the top bar, header bar. Header title style that's why this, see title is handy never have to look at Doc's again. They do color pink, okay so good okay cool.

[00:09:18]
S o because this is the style of this text element, we can set the font family here Font family, theme and font family regular. And then lastly, we have these mood item rows so we hope in the mood to row. We have the mood description. So font, family, theme, font family bold.

[00:09:55]
And Mood date, so this will be font family, theme, font family regular, Cool, I think we have everything styled. Let's see if this works on Android, not sure if the app was actually rebuilt. Again, so we have this on Android as well. Except on choose button for some reason, so that's why the reasons so here because we've got font weight bold, and the font family I think those are conflicting.

[00:10:49]
Yeah, so that's the reason that's like if you're using fun family, I don't usually add a separate font weight because, you can get strange effects. So who moved this, this will work again. Excellent. Okay, another thing, I think we have some, because this font has a higher line height than our previous font, we're actually get a slight shift.

[00:11:18]
Now, in the height of this container, so I'm going to remove the padding from come on where do I was I think from here, margin bottom. And then give it a fixed height, okay so we have our container here and I wanna give it a fixed height. Let's do 240, 250 and there is 240, I'm gonna do 250.

[00:12:08]
And then if I do justify content, space between, then I don't need the margin bottoms for the padding anymore. So margin, bottom And margin top. Okay, so now when I toggle between them, there you go. So I want this screen and then this picker screen to be the same height.

[00:12:39]
So basically what I've done is I've given the container a fixed height. And then I've said that justify content space between which means that, however many content items we have, just make sure that the space between them is equal. And then the first one is at the top of the container.

[00:12:57]
The last ones at the bottom of the container. So just to the UI thing because it was annoying me that it was flickering.