A demo for Android font typeface support in React Native!

Overview

A Step-by-step Guide to a Consistent Multi-Platform Font Typeface Experience in React Native

Goal

Be able to use font typeface modifiers such as fontWeight and fontStyle in combination with a custom font family, in both iOS and Android.

<Text style={{
  fontFamily: "Raleway",
  fontWeight: "100",
  style: "italic"
}}>
  Hello world!
</Text>
<Text style={{
  fontFamily: "Raleway",
  fontWeight: "bold",
  style: "normal"
}}>
  Hello world!
</Text>

For this example, we are going to register the Raleway font family. Of course, this method will work with any TTF font.

Prerequisites

Assets

You need the whole Raleway font family, extracted in a temporary folder. That is:

  • Raleway-Thin.ttf (100)
  • Raleway-ThinItalic.ttf
  • Raleway-ExtraLight.ttf (200)
  • Raleway-ExtraLightItalic.ttf
  • Raleway-Light.ttf (300)
  • Raleway-LightItalic.ttf
  • Raleway-Regular.ttf (400)
  • Raleway-Italic.ttf
  • Raleway-Medium.ttf (500)
  • Raleway-MediumItalic.ttf
  • Raleway-SemiBold.ttf (600)
  • Raleway-SemiBoldItalic.ttf
  • Raleway-Bold.ttf (700)
  • Raleway-BoldItalic.ttf
  • Raleway-ExtraBold.ttf (800)
  • Raleway-ExtraBoldItalic.ttf
  • Raleway-Black.ttf (900)
  • Raleway-BlackItalic.ttf

We will assume those files are now stored in /tmp/raleway/.

Find the font family name

You will need otfinfo installed in your system to perform this step. It is shipped with many Linux distributions. On MacOS, install it via lcdf-typetools brew package.

otfinfo --family Raleway-Regular.ttf

Should print "Raleway". This value must be retained for the Android setup. This name will be used in React fontFamily style.

Setup

react-native init FontDemo
cd FontDemo

Android

For Android, we are going to use XML Fonts to define variants of a base font family.

Remark: This procedure is available in React Native since commit fd6386a07eb75a8ec16b1384a3e5827dea520b64 (7 May 2019 ), with the addition of ReactFontManager::addCustomFont method.

1. Copy and rename assets to the resource font folder
mkdir android/app/src/main/res/font
cp /tmp/raleway/*.ttf android/app/src/main/res/font

We must rename the font files following these rules to comply with Android asset names restrictions:

  • Replace - with _;
  • Replace any uppercase letter with its lowercase counterpart.

You can use the below bash script (make sure you give the font folder as first argument):

#!/bin/bash
# fixfonts.sh

typeset folder="$1"
if [[ -d "$folder" && ! -z "$folder" ]]; then
  pushd "$folder";
  for file in *.ttf; do
    typeset normalized="${file//-/_}";
    normalized="${normalized,,}";
    mv "$file" "$normalized"
  done
  popd
fi
./fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/font
2. Create the definition file

Create the android/app/src/main/res/font/raleway.xml file with the below content. Basically, we must create one entry per fontStyle / fontWeight combination we wish to support, and register the corresponding asset name.

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="100" app:font="@font/raleway_thin" />
    <font app:fontStyle="italic" app:fontWeight="100" app:font="@font/raleway_thinitalic"/>
    <font app:fontStyle="normal" app:fontWeight="200" app:font="@font/raleway_extralight" />
    <font app:fontStyle="italic" app:fontWeight="200" app:font="@font/raleway_extralightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="300" app:font="@font/raleway_light" />
    <font app:fontStyle="italic" app:fontWeight="300" app:font="@font/raleway_lightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/raleway_regular" />
    <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/raleway_italic"/>
    <font app:fontStyle="normal" app:fontWeight="500" app:font="@font/raleway_medium" />
    <font app:fontStyle="italic" app:fontWeight="500" app:font="@font/raleway_mediumitalic"/>
    <font app:fontStyle="normal" app:fontWeight="600" app:font="@font/raleway_semibold" />
    <font app:fontStyle="italic" app:fontWeight="600" app:font="@font/raleway_semibolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/raleway_bold" />
    <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/raleway_bolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="800" app:font="@font/raleway_extrabold" />
    <font app:fontStyle="italic" app:fontWeight="800" app:font="@font/raleway_extrabolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="900" app:font="@font/raleway_black" />
    <font app:fontStyle="italic" app:fontWeight="900" app:font="@font/raleway_blackitalic"/>
</font-family>
3. Register the new font

In android/app/src/main/java/com/fontdemo/MainApplication.java, bind the font family name with the asset we just created inside onCreate method.

⚠️ If you are registering a different font, make sure you replace "Raleway" with the name found in the former step (find font family name).

--- a/android/app/src/main/java/com/fontdemo/MainApplication.java
+++ b/android/app/src/main/java/com/fontdemo/MainApplication.java
@@ -7,6 +7,7 @@ import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -43,6 +44,7 @@ public class MainApplication extends Application implements ReactApplication {
   @Override
   public void onCreate() {
     super.onCreate();
+    ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }

iOS

On iOS, things will get much easier. We will basically just need to use React Native asset link functionality. This method requires that we use the font family name retrieved in the first step as fontFamily style attribute.

Copy font files to assets folder

mkdir -p assets/fonts
cp /tmp/raleway/*.ttf assets/fonts

Add react-native.config.js

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

Link

react-native link

You can remove assets for android generated with this command, since we are using the XML Font method. Otherwise, they would be included twice in the app bundle!

rm -rf android/app/src/main/assets/fonts

Result

iOS Android

Postscriptum

If you found this guide relevant, I would greatly appreciate that you upvote this StackOverflow answer. It would also help the community finding out this solution. Cheers!

You might also like...
A react native interface for integrating payments using PayPal

react-native-paypal Getting started Installation npm install react-native-paypal Android Specific Add this to your build.gradle maven { url "https:

Make SIP calls from react-native using Linphone SDK

react-native-sip Make SIP calls from react-native using Linphone SDK Installation npm install react-native-sip Usage import { multiply } from "react-n

A framework for building native applications using React

React Native Learn once, write anywhere: Build mobile apps with React. Getting Started · Learn the Basics · Showcase · Contribute · Community · Suppor

NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.
NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

Wrapper for Kustomer SDK v2.0 for react native
Wrapper for Kustomer SDK v2.0 for react native

This is a wrapper for Kustomer v2 Sdk for react native. This implements the kust

 A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library.
A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library.

Expo Music Picker A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library. Supp

Android-splash-screen-demo - Sample application to demo the various features provided in android-splash-screen
Android-splash-screen-demo - Sample application to demo the various features provided in android-splash-screen

Android Splash screen API demo This is a sample application used to demonstrate the various features provided in android-splash-screen. More details c

OpenWeatherMap-API-Demo - Demo Android Application for OpenWeatherMap API

WeatherForecast Demo Android Application for OpenWeatherMap API Table of Content

A Python native extension written in Kotlin Native

Kotlin Python Ext This is a proof of concept for a Python extension in Kotlin. It is recommended to read the Official Python C API Documentation befor

Comments
  • About iOS Problem

    About iOS Problem

    Thank you for your kind report.

    Your react-native-font-demo is really helpful for me.

    I finished my job about android, but iOS is still not working.

    It says that "Unrecognised font family".

    Is there any way to solve this problem?

    Thanks :D

    opened by chansoo04 1
  • Duplicate Assets

    Duplicate Assets

    Hello!

    We are truly grateful for your solution, however we do have 1 problem.

    Currently the fonts assets will be duplicated ( assets/fonts and android/app/src/main/res/font).

    Is there a way to only include the fonts one in your react-native app?

    opened by DaveyNedap 1
Owner
Jules Sam. Randolph
Build the wheel!
Jules Sam. Randolph
React-native-user-interface - Change React Native userinterface at runtime

react-native-user-interface change RN userinterface at runtime. Installation npm

Ahmed Eid 0 Jan 11, 2022
Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.

@mccsoft/react-native-matomo Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in th

MCC Soft 4 Dec 29, 2022
React Native Stone SDK Implementation (Support for both Mobile and POS versions)

react-native-stone-pos Stone Android POS Native Module Installation Stone has a private packageCloud repository, so we need to have your token before

8Sistemas 9 Dec 10, 2022
Initiate immediate phone call for React Native on iOS and Android.

react-native-immediate-call-library Initiate immediate phone call for React Native on iOS and Android. Getting started Using npm: npm install react-na

null 7 Sep 7, 2022
A 2020s compatible React Native keyboard avoiding view for Android and iOS that just works.

react-native-keyboard-shift Example Snack coming soon Until then: Clone this repo: git clone https://github.com/FullStackCraft/react-native-keyboard-s

Full Stack Craft 66 Aug 16, 2022
🚀 React Native Segmented Control, Pure Javascript for iOS and Android

Installation Add the dependency: npm i react-native-segmented-control-2 Peer Dependencies Zero Dependency ?? Usage Import import SegmentedControl from

FreakyCoder 11 Nov 10, 2022
Library to read incoming SMS in Android for Expo (React Native)

react-native-expo-read-sms Maintainers maniac-tech Active maintainer Installation Install this in your managed Expo project by running this command: $

Abhishek Jain 15 Jan 2, 2023
An Animated Scrolling View for React Native applications, supported on both iOS and Android

react-native-focused-scroll An Animated Scrolling View for React Native applications, supported on both iOS and Android Preview react-native-focus-scr

Fatemeh Marzoughi (Saba) 3 Aug 12, 2022
GeckoView implementation on android for React Native.

react-native-geckoview A fully functional implementation of GeckoView on android for react native. The component supports two-way messaging similar to

Ammar Ahmed 7 Nov 24, 2022
Simple library to decompress files .zip, .rar, .cbz, .cbr in React Native.

Uncompress React Native Simple library to decompress files .zip, .rar, .cbz and .cbr in React Native. Installation yarn add uncompress-react-native o

Adriano Souza Costa 40 Nov 24, 2022