Add a Custom Font to a React Native Application
iOS and Android come with several built in fonts, but if you want to use a custom font in your react native application, you'll need to add it first.
You can add a custom font by copying the font files to your project, telling react native where to find those files by adding an rnpm entry to your package.json file, and then linking them with react-native link.
Then, you can use that new font by specify it as the fontFamily style for a Text component, and you can change the fontWeight or fontStyle component if you've added additional style and weight font files.
Instructor: [00:00] Download the font files for all the different font types and weights that you want to use in your application. Then, find them on the desk and copy the files. In the root folder of your React Native project, make a new folder called "Fonts."
[00:19] This folder doesn't have to be called fonts, it can be called anything you like, and can also be placed in any subfolder of the project. Inside of the fonts folder, paste in your font files. Then, open the package.json file at the root of the React Native project.
[00:37] In the package.json file, create a new r npm entry, if it doesn't already exist. To that r npm entry, add an entry for assets. This is a special entry, where you can list all the assets that should be linked to the underlying iOS and Android projects.
[00:55] Assets takes an array of directories, so put in the relative path to the font directory that we just added. In a terminal and the root of the project, link the assets with React Native link. That will link all the fonts to the iOS and Android Native projects.
[01:11] We're on a get status now, we can see that the underlying iOS and Android projects actually changed. Because of that, you will want to stop and restart the packager before you can use your new font.
[01:29] With the fonts added and the app restarted, change the font family of the text component by adding a font family key to the style prop. The font family string will match the names of the font files that you added. When you reload the simulator, you can see the new font.
[01:46] If you added multiple font weights, you can use the other font weights by keeping the same font family string by changing the font weight style, or you can change the font family style to match one of the other font weight file names.
[02:05] If you have italic font files, you can switch to italics by using the font family name, or by keeping the regional font family name the same, and setting the font style to italic.