Skip to content
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.

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

Custom fontFamily for Text not working in either iOS or Android #17641

Closed
sunweiyang opened this issue Jan 17, 2018 · 6 comments
Closed

Custom fontFamily for Text not working in either iOS or Android #17641

sunweiyang opened this issue Jan 17, 2018 · 6 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@sunweiyang
Copy link
Contributor

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.4.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.0 => 0.52.0

Steps to Reproduce

  1. Place contents of Nunito font fro Google (*ttf files) into project root's assets/fonts/ directory (here are the contents of that directory)
  2. Add the following to my package.json:
"rnpm": {
    "assets": [
	"./assets/fonts/"
    ]
},
  1. Run react-native link
  2. Verify that both Xcode/Info.plist and Android Studio reflects the new Nunito font:
    screen shot 2018-01-17 at 10 41 59 am
    screen shot 2018-01-17 at 10 44 44 am
  3. Run ./gradlew clean from android directory, fresh install of node_modules from scratch, fresh install of pods from android directory, restart both Xcode and Android Studio, reset npm cache, uninstall and reinstall app on variety of emulators and devices
  4. Try setting Text.defaultProps.style = {fontFamily: 'Nunito'}; in root component (App.js)
  5. Try setting {fontFamily: 'Nunito'} style for a single Text component

Expected Behavior

I expected globally setting Text.defaultProps.style = {fontFamily: 'Nunito'}; to result in the font being applied everywhere in my app, or at the very least setting {fontFamily: 'Nunito'} style for a single Text component to work.

Actual Behavior

In all cases, I still only observe my app using the default RN font family.

@lwinkyawmyat
Copy link
Contributor

Can you try to match font filename and fontFamily name.

{ 
  fontFamily: 'Nunito-Reqular' // if filename is Nunito-Reqular.ttf
}
{ 
  fontFamily: 'Nunito-Bold' // if filename is Nunito-Bold.ttf
}

@lwinkyawmyat
Copy link
Contributor

@facebook-github-bot duplicate #15266

@facebook-github-bot
Copy link
Contributor

Duplicate of #15266

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Jan 18, 2018
@sunweiyang
Copy link
Contributor Author

@lwinkyawmyat I'm unsure if it's a duplicate, since I don't have fontWeight or fontStyle set.

@vivek-walecha-657-zz
Copy link

i am facing the same issue, tried everything but dint get any solution.

@hamadasamir85
Copy link

I found out that font names on ios are different from the file name.
the files name might be 'GE_SS_TWO_MEDIUM.ttf' but if you check the font info with fontbook app you will find the name is 'GE SS TWO'.
using the file name as fontfamily works on android but does not work on ios ,and vise versa
so my solution was to use Platform check on style

fontFamily: Platform.OS === 'ios' ? 'GE SS TWO':'GE_SS_TWO_MEDIUM'

worked for me so far

@facebook facebook locked as resolved and limited conversation to collaborators Jan 18, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jan 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

6 participants