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

---
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:

  ```js
    // 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](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to see what customization options are supported.

Example:

```js
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>
  );
}
```