There are over a thousand Text fonts freely available on internet for web and mobile applications. Custom font gives us the facility to expand our way of representing content in mobile applications like we see in Websites, Because we can use any font according to our customer requirement. There are no limitation in text if you are using custom fonts. Custom fonts makes our app rich and expensive. So in this tutorial we would going to create a react native mobile application with Custom External Text Fonts applied on Text component using fontFamily style. All the fonts used in this tutorial is downloaded from Google Fonts. You can also download fonts from Google Fonts. So let’s get started 🙂 .
Contents in this project Add Custom External Text Fonts in React Native App :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Download Custom External fonts.
3. Open you react native project’s folder and create two folders inside it . First one assets . Now create another folder named as fonts inside the assets folder.
4. Put all the downloaded fonts inside the assets/fonts folder.
5. Open package.json file present inside your project folder. Add below lines inside it. Using the below code we would tell the React native project about our newly created custom fonts folder.
|
1 2 3 4 5 |
"rnpm": { "assets": [ "./assets/fonts/" ] } |
6. Below is the copy of my package.json file after adding above code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
{ "name": "Myproject", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.0.0-alpha.12", "react-native": "0.48.4" }, "devDependencies": { "babel-jest": "21.2.0", "babel-preset-react-native": "4.0.0", "jest": "21.2.1", "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" }, "rnpm": { "assets": [ "./assets/fonts/" ] } } |
7. Now Open your project folder inside CMDÂ / Terminal, like i did in below screenshot.
6. Run react-native link  command . This command should refresh your complete project and add newly created assets/fonts folder to its directory listing. Now the font can be accessible using fontFamily style.
7. Open index.android.js / index.ios.js file.
8. Import AppRegistry, StyleSheet, Text and View component in your project.
|
1 2 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; |
9. Create 3 Text component inside a Parent View in the render’s return block .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.container}> <Text> React Native App </Text> <Text> React Native App </Text> <Text> React Native App </Text> </View> ); } |
10. Now add custom fonts using inline style in each Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.container}> <Text style={{fontFamily: "BerkshireSwash-Regular", fontSize: 30}}> React Native App </Text> <Text style={{fontFamily: "Pacifico-Regular", fontSize: 30}}> React Native App </Text> <Text style={{fontFamily: "GermaniaOne-Regular", fontSize: 30}}> React Native App </Text> </View> ); } |
11. Add style sheet class for Parent View.
|
1 2 3 4 5 6 7 8 |
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); |
12. Complete source code for index.android.js / index.ios.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class Myproject extends Component { render() { return ( <View style={styles.container}> <Text style={{fontFamily: "BerkshireSwash-Regular", fontSize: 30}}> React Native App </Text> <Text style={{fontFamily: "Pacifico-Regular", fontSize: 30}}> React Native App </Text> <Text style={{fontFamily: "GermaniaOne-Regular", fontSize: 30}}> React Native App </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('Myproject', () => Myproject); |
Screenshot in Android mobile phone application :
Screenshot in iOS mobile application :
Nice tutorial sir, I was looking such type of tutorial.
Welcome Gamer Singh 🙂 .
At first, it doesn’t work for me
After reinstalling the project it works really well
Thanks a lot
Welcome Bikash 🙂 .
Thanks Bro…
its working fine.
Welcome Manpal 🙂 .
Its is not working in ios
Priyanka it is working, can you tell me what error you have facing?
For this 1 thing we skipped name of font should be same in case of ios which was different in my case but in android it was working ..Now my issue is fixed thanks
Welcome Priyanka 🙂 .
Does not work and that package.json stuff is deprecated.
Thanks for notifying us .
Thanks for telling us, I will read about it and publish a new tutorial with it.