Load font from file and base64 string

Usage no npm install needed!

<script type="module">
  import reactNativeDynamicFont from '';



Getting started

$ npm install react-native-dynamic-font --save

Mostly automatic installation

$ react-native link react-native-dynamic-font

Manual installation


  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-dynamic-font and add ReactNativeDynamicFont.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libReactNativeDynamicFont.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<


  1. Open up android/app/src/main/java/[...]/
  • Add import com.ashrithks.dynamicfont.ReactNativeDynamicFontPackage; to the imports at the top of the file
  • Add new ReactNativeDynamicFontPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-dynamic-font'
    project(':react-native-dynamic-font').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-dynamic-font/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-dynamic-font')

Example of how to use

To load a font dynamically, you must first have a base64 string of your font file (TTF or OTF):

import { loadFont, loadFonts } from 'react-native-dynamic-font';

/* Load a single font */
loadFont('nameOfFont', base64FontString, 'ttf').then(function(name) {
    console.log('Loaded font successfully. Font name is: ', name);

/* Load a list of fonts */
loadFonts([{name: 'nameOfFont', data: base64FontString, type: 'ttf'}]).then(function(names) {
    console.log('Loaded all fonts successfully. Font names are: ', names);


Font loading using file path

You can download font file to file system and then load it to app without sending base64 to bridge.

import {loadFontFromFile} from 'react-native-dynamic-font';
import RNFetchBlob from 'rn-fetch-blob'

const fontFilePath = RNFetchBlob.fs.dirs.DocumentDir + "fonts/roboto.ttf";

loadFontFromFile("Roboto",  fontFilePath)
   .then(function(name) {
        console.log('Loaded font successfully. Font name is: ', name);


option iOS Android Info
name Not used Used Specify registered font name (doesn't work for iOS)
data Used Used This can be a data URI or raw base64... if it is raw base64 type must be specified, but defaults to TTF (data URI mime: font/ttf or font/otf)
type Used Used (optional) Specify the type of font in the encoded data (ttf or otf). Defaults to "ttf"

The Response

The ACTUAL name the font was registered with. Use this for your fontFamily.