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

manoj_004d profile image

Display Chart in Express.js App using CanvasJS

Manoj Mohan -

ayoola_damilare_212d5bde0 profile image

My React Journey: Day 9

Ayoola Damilare -

trinly01 profile image

Software Dev Roles and Salary ranges in the Philippines (2024)

Trinmar Boado -

arindam_1729 profile image

Top 5 Open Source Projects You Must Explore Before 2025

Arindam Majumder -