DEV Community

Cover image for Use Custom Fonts In ReactNative App
Ashirbad Panigrahi
Ashirbad Panigrahi

Posted on

Use Custom Fonts In ReactNative App

#reactnative #javascript #react

Let's use custom fonts in you react-native app

Create a react native app with typescript or javascript 

npx react-native init [ProjectName] --template react-native-template-typescript
Enter fullscreen mode Exit fullscreen mode

Create a fonts folder & copy your fonts into this folder 

mkdir fonts
Enter fullscreen mode Exit fullscreen mode

Create react-native.config.js file in the root of your project 

touch react-native.config.js
Enter fullscreen mode Exit fullscreen mode

Add following code in react-native.config.js file 

module.exports = {
  assets: ['./fonts/'],
};
Enter fullscreen mode Exit fullscreen mode

Run following command to link fonts to your project 

npx react-native-asset
Enter fullscreen mode Exit fullscreen mode

Now open App.tsx file and use your custom font family 

import {SafeAreaView, StyleSheet, Text} from 'react-native';
import React from 'react';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Italic}>Italic</Text>
      <Text style={styles.Bold}>Bold</Text>
      <Text style={styles.Regular}>Regular</Text>
      <Text style={styles.Light}>Light</Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {padding: 10},  
  Bold: {fontSize: 30, fontFamily: 'Nunito-Bold'},
  Light: {fontSize: 30, fontFamily: 'Nunito-Light'},
  Regular: {fontSize: 30, fontFamily: 'Nunito-Regular'},
  Italic: {fontSize: 30, fontFamily: 'Nunito-Italic'},
});
Enter fullscreen mode Exit fullscreen mode

Get Full Source Code In GitHub

Top comments (0)

Read next

syakirurahman profile image

11+ Best Open-source Web Analytics, Alternatives to Google Analytics 🚀

Syakir -

roshankrsoni profile image

🚀 React Native's New Architecture Brings 550% Speed Boost

Roshan Kr Soni -

martygo profile image

The best React Form's validation libraries ✅🥇

Martins Gouveia -

thinkthroo profile image

Usage of Dexie, an IndexedDB wrapper, in Lobechat

thinkThroo -