/ custom

Adding custom fonts to react native for Android

To add custom font to your react-native app on android, follow the steps below:

TL;DR – Here is the Code

  • Create directory  /android/app/src/main/assets/fonts and add .ttf or .otf file of your custom font to this directory. In this example, font used is NewWalt. This will bundle the font file along with your app at the time of deployment.directory
  • You can now use the font in your styles as follows:
const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
		fontFamily: 'NewWalt', // Name of custom font 
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
})

You should now have the font applied in the app:

with-custom-font-2

For iOS, please refer to this excellent article

https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f#.iren23ade