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

yanaiara profile image

Angular vs. ReactJS: Which One Should You Pick for Your Next Project?

Yanaiara Oliveira -

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

preethi_p_gowda profile image

Future-Proofing Your Auth0 Integration: Moving from Rules and Hooks to Actions

Preethi Puttegowda -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -