Add a Custom Font to a React Native Application

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

egghead
egghead
~ 14 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today