FontFamily React Native App overwrite with device custom font (Samsung & Oppo)

20
votes

In React Native, I define font family for all text with Rubik font but for some devices (SAMSUNG & OPPO), the font looks like overwrite with a custom device font because that brand can choose a custom font for their device.

I don't know why sometimes some text looks like overwrite with custom device font & some text still uses the Rubik font.

Environment:

  • OS: macOS HighSierra
  • Node: 9.3.0
  • Yarn: 1.3.2
  • npm: 5.7.0
  • Watchman: 4.9.0

Packages:

  • react-native: "^0.47.2,
  • react: "^16.0.0-alpha.12,
  • react-native-vector-icons: ^4.4.2,

Target Platform: Android

enter image description here

Any ideas on how to make a device font can't overwrite the set font family font?

2
androidcssreactjsreact-nativefonts
try this: github.com/chrisjenx/Calligraphy – Sagar Chavada
do the names of your font files use dashes or underscores? I had an issue where I had to use underscores in Android to get it to work properly. – Jeremy
See if this stackoverflow.com/questions/19268421/… and this helps gist.github.com/artem-zinnatullin/7749076 – Tarun Lalwani
How are you loading your fonts? Through the google cdn or locally? – Coder100
is there any solution for this? I am also experiencing in react native 0.62.2 on oppo phone. – Kyaw Soe Hein

2 Answers

2
votes

In your package.json add the key 

{
.
.
.
  sideEffects:false,
.
.
.
}
-1
votes

In IOS, if you use just the fontFamily:"Rubik", the app automatically identifies the style based on fontStyle like Regualr/Italic/Bold etc.

But in android, sometimes you have to use the exact fontFamily like fontFamily:"Rubik-SemiBold", fontFamily:"Rubik-Regular".

It should resolve your issue.