Fonts

Installing custom fonts

The easiest way to install custom fonts to your RN project is do as follows:

1. Define path to assets directory with fonts in project:

   Example:

   // React Native < 0.60 package.json
   ...
    "rnpm": {
      "assets": [
        "fonts"
      ]
    },
   ...
   
   // React Native >= 0.60 react-native.config.js
   module.exports = {
   ...
   "assets": [
    "fonts"
   ],
   ...

   Note: fonts is a folder with .ttf files

2. Place your fonts files in your assets folder

3. Link fonts files using 'react-native link' command

4. Restart your project to refresh changes

5. You are able to use fontFamily based on fonts files

Configuring fonts in ThemeProvider

To create a custom font you need to prepare fontConfig where fonts are divided by platforms. After you have to pass the fontConfig into configureFonts method in a custom theme.

Note: To override font on all platforms use default key.

Check the default theme to see what customization options are supported.

import * as React from 'react';
import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

const fontConfig = {
  default: {
    regular: {
      fontFamily: 'sans-serif',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'sans-serif-medium',
      fontWeight: 'normal',
    },
    light: {
      fontFamily: 'sans-serif-light',
      fontWeight: 'normal',
    },
    thin: {
      fontFamily: 'sans-serif-thin',
      fontWeight: 'normal',
    },
  },
};

const theme = {
  ...DefaultTheme,
  fonts: configureFonts(fontConfig),
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}