react-native-paper/docs/pages/4.fonts.md

title

title
Fonts

Fonts

Installing custom fonts

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

1. Define path to asssets 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

After you configure the fonts you need to pass them as font object in a custom theme with the Provider component. Check the default theme to see what customization options are supported.

Example:

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

const theme = {
  ...DefaultTheme,
  fonts: {
      regular: 'Roboto',
      medium: 'Roboto',
      light: 'Roboto Light',
      thin: 'Roboto Thin',
    },
};

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