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

Question

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

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

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, Apr 10 '18 at 23:58
See if this https://stackoverflow.com/questions/19268421/how-to-prevent-textview-font-changing-when-we-change-the-device-font-style-in-s and this helps https://gist.github.com/artem-zinnatullin/7749076 — Tarun Lalwani, Apr 12 '18 at 09:33
How are you loading your fonts? Through the google cdn or locally? — Coder100, Nov 27 '20 at 23:28
is there any solution for this? I am also experiencing in react native 0.62.2 on oppo phone. — Kyaw Soe Hein, Jun 28 '21 at 11:41

score 2 · Answer 1 · answered Jun 02 '20 at 04:33

2

In your package.json add the key

{
.
.
.
  sideEffects:false,
.
.
.
}

answered Jun 02 '20 at 04:33

Leandro Budau

66
2

score -2 · Answer 2 · answered Sep 06 '19 at 15:28

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.

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

2 Answers2