Hi guys, in this article I will share how to add and configure fonts in React Native CLI. This article was written by me through practical experience as well as referring to some articles I found on google.
1. Download and install the font
Download fonts
There are many different fonts online, you can find the right font for your project, you can refer to the following website https://designervn.net/threads/101-font-ch-mi -n-phi-tuy-t-voi-nhat-danh-cho-designer.10064/ Here I download the Mulish font set 
Set up project
First we will put the entire ttf file into a directory
- Create react-native.config.js file in the project root folder then add the following line of code:
1 2 3 4 5 6 7 8 | module.exports = { project: { ios: {}, android: {}, }, assets: ['./src/assets/fonts/'] }; |
Note: Must write the exact path of the font set just put into the project
- Run the following command to install the font: react-native link and npm react-native-asset After running the above command, check again in the android and ios directory there is a link-assets-manifest.json file, it means the link is successful font set
2. How to use fonts in the project
- Create a file and name each font and then export.
1 2 3 4 5 6 7 8 9 10 11 | const Fonts = { regular: "Mulish-Regular", bold: "Mulish-Bold", italic: "Mulish-Italic", boldItlaic: "Mulish-BoldItalic", semiBold: "Mulish-SemiBold", }; export default Fonts; |
- import the font set just set up on Screen
1 2 3 4 5 6 7 8 9 10 11 | import {StyleSheet} from 'react-native'; import { Fonts } from '../../../core'; const styles = StyleSheet.create({ text: { fontFamily: Fonts.italic } }); |
3. Closing and thanks
So I have guided you how to install and use fonts in React Native, hope this article will help you in your studies as well as your work. If you have any questions about the article or want me to talk about another topic, please comment below. Thank you for watching this article, if you find it interesting, please help me 1 upvote.