Custom Fonts In React Native: Pro Tip!

#tutorial #javascript #reactnative #beginners

So, recently, I was tasked with creating custom fonts for a React Native project, and I'm thrilled to share how I accomplished it!

Hey there! In this episode, I'm going to guide you into making your React Native app look amazing with custom fonts across both iOS and Android. Don't worry if you're new to this; I'll walk you through step by step!

First things first, why do we need custom font files? Well, while iOS comes with a bunch of fonts, Android's options are a bit limited. So, if you want those pretty fonts on both platforms, custom fonts are the way to go.

You can snag font files from various places online. Google Fonts is a popular spot for freebies. Once you've got your font file downloaded, there's just one thing to watch out for: make sure the font file name matches the font family's full name. This ensures compatibility across platforms.

Step 1: Download Custom Font Files

Head over to a font repository like Google Fonts and choose a font you like. Let's say we pick "Briem Hand" from the search input. Download the font files by clicking Get Font, usually provided in a zip format.

Step 2: Extract and Rename Font Files
Extract the zip file and find the font file you want to use. Rename it to match the font family's full name. You can find this name in the font information section of your system's font book.

For example, if the font's full name is "BriemHand-Variable-Font ," rename the file to "Briem Hand.ttf".

Step 3: Add Font Files to Your React Native Project
Create a folder named "fonts" within the "assets" directory of your React Native project. Place your custom font file inside this folder.

Step 4: Configure React Native
If you don't already have a "react-native.config.js" file, create one at the root of your project. Inside this file, export the configuration for React Native and specify the assets folder.



module.exports = {
  assets: ['./assets/fonts/'],
};

Step 5: Link Assets
Run the command to link the assets to your iOS and Android projects:



npx react-native-asset

Step 6: Define Styles with Custom Fonts
In your app's main file or wherever you define your styles, set up styles for your text components. Include the custom font family pointing to your font file name.



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

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
  customText: {
    color: 'black',
    fontSize: 30,
    fontFamily: 'Briem Hand'
  },
});

const App = () => {
  return (
    <View style={styles.main}>
      <Text style={styles.customText}>Hello, Custom Font!</Text>
    </View>
  );
};

export default App;

And that's it! You're all set. Your custom fonts will now beautifully adorn your app on both iOS and Android without any platform-specific hassle.

Until next time!..... Hope you will have a font-tastic journey ahead using custom fonts! 😃

Top comments (6)

Maximiliano Ariel Sussini Romano • Jun 5

Is this actually a variable font? For example, is the following allowed?
customText: {
color: 'black',
fontSize: 30,
fontWeight: 'bold', <-- here
fontFamily: 'Briem Hand'
}

Thanks!

Mitchell Mutandah • Jun 6

Hi @hellagood9 ,

The style should apply correctly if 'Briem Hand' is properly loaded and supports bold weights. If you encounter any issues, please ensure the following:

Font Loading: Verify that the 'Briem Hand' font file is correctly loaded into your project.
Weight Support: Ensure that the 'Briem Hand' font supports the fontWeight you are specifying (e.g., 'bold').

Additionally, remember that thefontWeight property can take numeric values from 100 to 900, allowing finer control over the font weight if needed.