CODEWITHSUNDEEP
androidreact-nativefonts
PrinzAndreVonLandmann
PrinzAndreVonLandmann

Reputation: 315

react native import fonts

I am trying to add fonts to my Project. i added it like Here recomended

1.) added to Package.json

Package.json:

  "rnpm": {
    "assets": [
      "./assets/fonts/"
     ]
   }

2.) added files

assets\fonts\Roboto.ttf

assets\fonts\vincHand.ttf

3.) Linked everything

 rnpm link

4.) added code to my Project

      <Text> Test </Text>
      <Text style={{ fontFamily: "Roboto" }}> Test </Text>
      <Text style={{ fontFamily: "vincHand" }}> Test </Text>

5.) rebuild app

react-native.cmd run-android

Result:

enter image description here

Question

why are the fonts not displayed and all 3 text with the default-Font?

Upvotes: 0

Views: 3150

Answers (3)

PrinzAndreVonLandmann
PrinzAndreVonLandmann

Reputation: 315

Well the solution was kinda easy but hard to find. It was not enough to run 'react-native.cmd run-android' to rebuild the app. I had to really unistall the app from the sumulator and reinstall it on the simulator

Upvotes: 1

Tarreq
Tarreq

Reputation: 1365

1- In package.json, add these lines like :

"rnpm": {
  "assets": [
    "fonts"
  ]
},

2- run : react-native link

3- build your project again by : react-native run-ios (or) react-native run-android

4- you can use fonts in code like : 

...
export default class myApp extends Component {
  ...
  render() {
    return (
      <Text style={styles.myCustomText}>Wow, it looks different.</Text>
    )
  }
}
const styles = StyleSheet.create({
  myCustomText: {
    fontFamily: 'YOUR_CUSTOM_FONT_NAME',
  },

})

Upvotes: 2

YaNuSH
YaNuSH

Reputation: 1097

fonts' full names might be different than fonts' filenames. Are you sure you are using the correct full names in your code?

Upvotes: 1

Related Questions