react-native-custom-fonts
react-native-custom-fonts copied to clipboard
atoami
React Native Custom Fonts 📚
trafficstars
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!
atoami