Skip to content

atoami/react-native-custom-fonts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Available Fonts

  • HelveticaNeue-Bold
  • HelveticaNeue-Medium
  • Lato-Black
  • Roboto-Bold
  • Roboto-Light
  • Roboto-Medium
  • Roboto-Regular
  • SFProDisplay-Black
  • SFProDisplay-Bold
  • SFProDisplay-Heavy
  • SFProDisplay-Light
  • SFProDisplay-Medium
  • SFProDisplay-Regular
  • SFProDisplay-Semibold
  • SFProDisplay-Thin
  • SFProDisplay-Ultralight
  • SFProText-Bold
  • SFProText-Regular
  • SFProText-Semibold

How to use?

1. Add the following lines in your project's package.json.
"rnpm": {
    "assets": [
      "app/fonts" // Folder including all font files(otf, ttf, ...)
    ]
}
2. Add font files.

Add font files(otf, ttf, ...) in font assets folder.

3. Run the following command.
react-native link

This links all fonts(app/fonts in example) to iOS & Android projects.

4. Add font component.

Add font components(SFProDisplayMedium.js, ...) in your project.

5. Rebuild the project.

You must rebuild the project after add font files.

6. Now, you can use the fonts anywhere in your project.
import { SFProDisplayMedium } from '../SFProDisplayMedium.js';
...
<SFProDisplayMedium style={styles.fontStyle}>
  Text Here
</SFProDisplayMedium>

Demo

You can find demo here.

Welcome to Pull Request!