Custom Fonts

[00:00:00]
>> Kadi Kraman: So far we've been using the default system font, or whatever the user has configured. So that is San Francisco for iOS and Roboto for Android, so all of our text is using that. In order to use a custom font, we need to bundle the font files with our application.

[00:00:16]
There are two ways to do this, to do custom fonts using Expo, you could load the font at runtime using the usefont hooks. So this mostly exists to make custom fonts available to Expo Go, and the font loads asynchronously at runtime. So actually the way we do it is using this splash screen hack or workaround or basically, but using the splash screen to do it.

[00:00:42]
So usually what you would do to prevent the font from like flickering from one to the other or like not working. Is that you would prevent the splash screen from hiding, you fetch the font, you load the font and then you show the splash screen. Or you can use the expo-fontconfig plugin, and this is only available with development builds, and this bundles the font files in the native bundle so they're always available.

[00:01:09]
As we are on team development build now, we will go with this option number two. Otherwise if you are using fonts and you have both OTF and TTF options, choose OTF because they tend to be smaller, but both of them pull back. So I mentioned a conflict plugin, so plugins and mods are the key to making changes in your native projects during pre-build.

[00:01:37]
So right now our iOS and Android projects are ephemeral, so they are throwaway, we are generating them only so we could build our native project. And if I make any changes here manually, they will be wiped with the next prebuilt. So what if I want to install a library or I want to make some change that requires like changing this safe directory, but I don't want to opt out of this preamble photo because it's handy.

[00:02:05]
And the key to that are plugins and mods, so they are little JavaScript functions that get a run during pre-built. And then you can change the files you need to a directory or you can change context, so there's little example here. And most complicated libraries that require additional native configuration will use a config plugin to achieve that, so the config plugin will be shipped with the library.

[00:02:36]
So config plugins aren't available with expo go because they're changing the native direct. So if you need to use a config plugin, you have to use a development build. So Google Fonts has a huge amount of fonts available, it's pretty handy and they are all free to use, which is also pretty handy.

[00:02:55]
So if you're building client projects, then a lot of times they will provide you with font files, so you can use those. But if you're building for smaller projects or for yourself, then Google Fonts is often a good option. Let's for example, take this font Caveat, I know handwriting fonts, doing your whole app in handwriting in fonts would probably be a bit intense.

[00:03:16]
But I think it's pretty nice to use this, for example for our little tagline on the on boarding screen. So we also have these convenient libraries, so you could download this font. So you could go to get font and then download it and include it manually. If you're using a Google font, we also have libraries for all the Google fonts that you could, npx expo install them instead of having to manually download them.

[00:03:48]
So, that's npx expo install expo-font and this Google font for Caveat, gonna do this here.
>> Kadi Kraman: And now, we need to add the config plug-in to include this font file in our native projects.
>> Kadi Kraman: All right, so this will be in our app.json and there we go, so our plugins are here, so we already had a little plugin for Expo Router.

[00:04:31]
So to pass in additional options to our plugin, I'm going to convert this into an array. Yes, so I'm going to convert this into an array and the first element of the array is It's going to be the name of the plugin, and the second one is an object with fonts.

[00:04:54]
>> Kadi Kraman: And this will be an array of fonts, so the font that we chos, we installed a library for it. So it's actually look so it'll be expo-google-fonts/caveats, so if we go to our node modules, expo-google-fonts, there you go. So these are all of our font files [COUGH] and I think I chose the 400 one.

[00:05:21]
So, if you had your own OTF or TTF file, you could put it in your assets directory and then link from it from here. Because this is in my node modules, I'll just copy the path and add it here.
>> Kadi Kraman: Okay and now all that's left to do is to rebuild, so I'm gonna do my same trick again just to remove this from gitignore so we could just see all the things that prebuild is adding.

[00:06:01]
And let me npx here expo prebuilt, and I'm gonna just do -- clean to do both projects at the same time.
>> Kadi Kraman: All right, and now if you look at what's changed in the Android directory, the Caveat font has been added to the fonts directory. And on iOS, it's listed in our info P list, and I think there's gonna be a link to it in the in the x code project, so these are the things that changed.

[00:06:59]
And finally, let me just add these back into gitignore, do wanna accidentally commit that because that would be a nightmare, and let's rebuild for an Android and run iOS.
>> Kadi Kraman: And now we wait, it shouldn't be too long.
>> Kadi Kraman: While I wait I'm going to add some plants.

[00:07:49]
>> Speaker 2: Do you ever add a seeding script, so you don't have to do this every time you do a pre-build to add data?
>> Kadi Kraman: A seeding script like for the data?
>> Speaker 2: Like a seeding script yeah, you wouldn't have to go in and add Sophie the spider plant.

[00:08:00]
>> Kadi Kraman: [LAUGH]
>> Speaker 2: Is that a thing with mold development? With Prisma Database, there's a seeding ability where you can say, hey, this is some mock data for maybe an environment or something.
>> Kadi Kraman: Yes, I see what you mean, so I haven't built a lot of apps where all the data is stored locally, tends to be stored remotely.

[00:08:20]
So you would have a mock API where you would load it from, that would be very common.
>> Speaker 2: We use markdown, you just build a markdown and you just say when you get a 200, respond with this and then you point to a local dev URL. Okay, so it's dependent on the app kind of mock.

[00:08:39]
Yeah, you just you change your local environment to say when you want to call mock data. You started with mock server, koon server. Interesting, I gotcha. That's how we do it.
>> Kadi Kraman: Yeah, so thankfully you don't have to rebuild very often in day-to-day life, so you would rebuild, go and have a cup of coffee, it's a nice break.

[00:09:03]
It's a little bit more tedious in a workshop setting. Okay, our field is done, so this should now include, let me just add the same, my two favorite plans. Okay and then let's go to onboarding, cuz what we wanted to do is change this onboarding the sub the call out, keep your plants healthy and hydrated.

[00:09:28]
Let's change this to a handwriting font, I think that would look quite nice. So the font that we added, the file name was, it was Caveat regular, so let's copy this and go to our onboarding file, tagline, fontFamily, Caveat Regular. Okay, and let's make this slightly bigger as well, I think 34 will do it.

[00:10:09]
>> Kadi Kraman: Okay, so you've noticed that it's updated immediately on Android, but it's not updated on IOS, why is that? The reason is on Android, the file name of the font file is used as the font family and this makes sense, it's really easy to see. We passed in the Caveat 400 regular into here and then that's why we're doing font family Caveat 400 regular.

[00:10:36]
On ios, it's actually using a postscript name of the font, which is not necessarily the same as the filename. So the way that you find out the postscript name is you have to load the font into your font book on Mac. So if you go to your node module, extra legal font, Caveat_400Regular.

[00:11:02]
And if you basically navigate to this folder and double click on it, it will open it you can open it in your font book. So it will be font book, so open it on here and actually, I've already loaded this one, but you could search for it. So this is all the fonts that are installed on my Mac are here, thats Caveat.

[00:11:26]
And here you can see the postscript name of the font, so you'll see that even though my file name was Caveat400Regular, the postscript name is actually Caveat Regular. So if I go to onboarding and change this to Caveat Regular, then Android stops working and iOS starts working, it's like whack a mole.

[00:11:55]
Well, thankfully we have utility functions to handle this, so we have platform, which is from React Native, so we use platform ios before. But there's actually another handy utility function, where you can do platform select, and here you can pass in an object. So on ios, we will choose Caveat Regular, and on Android, we will do it was Caveat_400Regular, which was the file name.

[00:12:37]
Now it works on both.