Skip to content

docs: update Fonts doc #3354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukewalczak merged 1 commit into from
Sep 22, 2022
Merged

docs: update Fonts doc #3354

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 28 additions & 110 deletions docs/pages/4.fonts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,119 +8,37 @@ title: 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:
`1.` Define path to assets directory with fonts in project:

Example:
<i>Example:</i>

```js
// React Native < 0.60 package.json
...
"rnpm": {
"assets": [
"fonts"
]
},
...

// React Native >= 0.60 react-native.config.js
module.exports = {
...
"assets": [
"fonts"
],
...
...
assets: [
'./assets/fonts'
],
```

Note: fonts is a folder with .ttf files

2. Place your font files in your assets folder.
3. Link font files using '`react-native link`' command.
4. Restart your project to refresh changes.

Now, you are able to use `fontFamily` from font files.

## Configuring fonts in ThemeProvider
Copy link
Member Author

@lukewalczak lukewalczak Sep 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once the following PR is merged I'm going to refine configuring fonts in v5, since it's different that on v4.


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

The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and `native`. Use these to override fonts on particular platforms.

Note: At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`.

Check the [default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/DefaultTheme.tsx) to see what customization options are supported.

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

const fontConfig = {
web: {
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',
},
},
ios: {
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',
},
},
android: {
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>
);
}
```
<i>Note:</i> `fonts` is a folder with `.ttf` files

`2.` Place your font files in your assets directory.

`3.` Link font files, using the following command in the terminal:

* React Native `>= 0.69`:

```sh
npx react-native-asset
```

* React Native `< 0.69`:

```sh
npx react-native link
```


`4.` Restart your project to refresh changes.

Now, you are able to use `fontFamily` from font files.