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

Unable to add custom font #18832

Closed
3 tasks done
wamry opened this issue Apr 12, 2018 · 3 comments
Closed
3 tasks done

Unable to add custom font #18832

wamry opened this issue Apr 12, 2018 · 3 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@wamry
Copy link

wamry commented Apr 12, 2018

I have searched existing issues, and they're all either closed with no solution or flagged "more information needed", so i'm making a new issue, hopefully this will contain all the info needed.

I'm trying to add a custom font, but no matter the font I try to add, I can't use it in the project,

Environment:

OS: Windows 10
Node: 9.5.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.1 => 0.55.1

Steps to Reproduce

i'm using Android KitKat 4.4.2(real device)
The font i'm trying to use is Vinc Hand, the file name is "vinchand.ttf", put it in "./src/assets/fonts"

Inside package.json

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

Checked if the file vinchand.ttf is in "android\app\src\main\assets\fonts" after running command "react-native link", and it is.

code to render text:
<Text style={{ fontFamily: "vinchand", fontSize: 20, color: "#000"}}>constantinople</Text>

Expected Behavior

To see "constantinople" using Vinc Hand font.

Actual Behavior

"constantinople" shows on screen, but not using Vinc Hand font.

@kelset
Copy link
Contributor

kelset commented Apr 13, 2018

Duplicate of #18269

@kelset kelset marked this as a duplicate of #18269 Apr 13, 2018
@kelset kelset closed this as completed Apr 13, 2018
@wamry
Copy link
Author

wamry commented Apr 13, 2018

no, it's not duplicate, the guy is using a different environment, different device, using ios not android.
and his issue is completely different, he gets unrecognized font, i don't get that error. and several other differences in his issue including the poor issue reporting of #18269 .

@SpQuyt
Copy link

SpQuyt commented Oct 16, 2018

Maybe you can do this:
Right click your font -> Properties -> go to "Detail" tab -> then change your font's name into whatever it is in "Title" of "Detail" tab.
Then you use that font in react-native.

Hope this help.

@facebook facebook locked as resolved and limited conversation to collaborators Apr 13, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants