Now we added fonts multiple times in this course already, so it's not too new
how this works. In the assets folder, I'll add a fonts folder but again, you can store them wherever you want. Attached
you find the two fonts we've been using throughout the course,
open sans bold and regular
and now we have to load them when the app starts in the app.js file. There,
you now can import something from expo and that something is the app loading component and you also need
to import star as font from expo-font and to make sure that this is available, run npm install
--save expo-font to install this into your project and ensure that you can use it.
Now these are the two things you need to install there and with that installed,
we can add a new function here, maybe name it fetch fonts.
This is a function which in the end takes no arguments but in there, I can now call font load async
and return that because that returns a promise and fetch fonts should return a promise and there
pass in a Javascript object where we map the fonts we want to load and then I'll have open-sans
which I map to my require import here where I point at the assets folder, fonts folder and that open-sans
regular and also add open-sans-bold here as a key and map that to require/assets
/fonts/open-sans-bold so that both fonts are imported here.
Now fetch fonts of course needs to be called and that should be called by our app loading component,
hence we also need to import the use state from React, so that we can control whether the data has been
loaded yet or not
so that in the functional component here, we can have our font loaded state and set font loaded and initially
with use state, that is false.
If that should be true, I want to render this output,
therefore as long as it is false, hence the exclamation mark here, I want to instead return the app loading
component which prolongs our loading, our startup screen and there, we need to provide these start async
prop which points at the fetch fonts function which is the function which is executed when this component
is first rendered and then on finish which executes a function once this loading is done and in this
function that is to be executed,
I'll set my font loaded to true so that we no longer render app loading but instead, we render this content.
Now our fonts get loaded and now we can use them and I want to use them in two places -
my product item which is the component we render on the products overview. There of course we have
some text, we have our title and we have our price here and it's there where on the title, I also want
to set a font family of open-sans-bold and on the price,
I also want to set a font family of open-sans and on the product detail screen, it's the
same. The price should maybe get a font family of open-sans-bold to have that bold style and
the description will just get the open sans font.
Now that's not all actually, in the shop navigator in my main navigator here, in the default navigation
options,
I also want to use that font in the header, so the header title style here should actually be an object
where I set the font family to open-sans-bold to use the bold open sans font there and the
header back title style defines how that back text which we see on iOS is styled this and that should also
use a font family of open-sans though, not the bold version. With that if we now save this and this reloads,
we can see our own font is getting used. Now we also see that here on iOS, our title is therefore
cut off, that's something we'll have to fix but in general, this now looks the way it should look. Now
let's make sure that title being cut off is fixed and for that in the product item here, which is where
we have that title, here this title should maybe have a reduced margin vertical of only 2 because I still
like that distance and now the 15% of height we give to the title and the price suffice to share this
and therefore now this looks the way it should look.
Now we're using the custom font, we can go to the details page,
I'd say it's now really time to also make sure that we can add items to the cart and we therefore make
this to cart button work.