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

react-native IOS fontFamily does not take effect for custom fonts #39321

Closed
vksgautam1986 opened this issue Sep 7, 2023 · 6 comments
Closed
Labels
Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Triage 🔍 Platform: iOS iOS applications.

Comments

@vksgautam1986
Copy link

vksgautam1986 commented Sep 7, 2023

Description

Custom Font family is not working for ios , working fine for android

I have downloaded few ttf and otf fonts and placed it.
"assets/fonts"

Then i created react-native.config.js
module.exports = { project: { ios: {}, android: {}, }, assets: ['./App/assets/fonts'], };
Screenshot 2023-09-07 at 3 43 32 PM

React Native Version

0.72.4

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1
Memory: 119.97 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.14.2
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 8.5.0
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /Users/netsmartz/.rvm/gems/ruby-3.0.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.1
- iOS 16.1
- macOS 13.0
- tvOS 16.1
- watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9862592
Xcode:
version: 14.1/14B47
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.8
path: /usr/bin/javac
Ruby:
version: 3.0.0
path: /Users/netsmartz/.rvm/rubies/ruby-3.0.0/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Get the font file needed for your project
Create a configuration file react-native.config.js in the root project directory and add the code below:
module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'], };

run this command
npx react-native-asset

Snack, screenshot, or link to a repository

Screenshot 2023-09-07 at 3 43 32 PM
Screenshot 2023-09-07 at 3 26 57 PM

@github-actions github-actions bot added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Sep 7, 2023
@github-actions
Copy link

github-actions bot commented Sep 7, 2023

⚠️ Missing Reproducible Example
ℹ️ We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

@github-actions github-actions bot added the Platform: iOS iOS applications. label Sep 7, 2023
@emmbyiringiro
Copy link

Specific for iOS. It's required to use PostScript Font Family Name not font file name style definition.
font-info

@vksgautam1986
Copy link
Author

Hi , i am using this highlighted one.
Screenshot 2023-09-08 at 11 17 20 AM

@emmbyiringiro
Copy link

You are using a font file name which is not a PostScript name. Use Apple Font Book app, not Finder.

@vksgautam1986
Copy link
Author

thanks its working fine now. i missed this one

@fkazemi5236
Copy link

this link is explains that what is the postScript name of the font in mac

https://apple.stackexchange.com/a/79889

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Triage 🔍 Platform: iOS iOS applications.
Projects
None yet
Development

No branches or pull requests

3 participants