Repository navigation
Font weight issue on React Native 0.83 when using custom font #54934
Description
Activity
Warning
Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:
- For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
- If your bug is UI related: a Snack
- If your bug is build/upgrade related: a project using our Reproducer Template
You can read more about about it on our website: How to report a bug.Reacted by Mostafa Abobakr, Uday Singh, abezulski-ilh and Saurav M HI have same issue +1
Reacted by Mostafa Abobakr, Olumide Ojo, BugVogel and Suhas Siriprolesame issue
Reacted by Mostafa Abobakr, Jeong Sang (정상), Basil Tarek and Saurav M HReacted by Mostafa Abobakr and Jeong Sang (정상)Reacted by Mostafa Abobakr, Jeong Sang (정상) and trv-alinFacing similar issue.
Thank you for making a PR to fix this bug @ptptsw
Reacted by ptptswFacing same issue
Issue (RN 0.83, iOS)
When using custom fonts on iOS, setting both fontFamily and fontWeight can make text look overly bold.
{ fontFamily: 'YourFont-Regular', fontWeight: '600', }Why this happens
iOS applies fontWeight on top of the font file’s built-in weight, so the weight ends up being applied twice.Recommended fix ✅
Use the specific PostScript font name and don’t set fontWeight on iOS.{ fontFamily: 'Montserrat-SemiBold', }Alternative
If you want to keep the same style object, only apply fontWeight on Android.{ fontFamily: 'YourFont-Regular', ...(Platform.OS === 'android' ? { fontWeight: '600' } : {}), }Notes
PostScript font names already include the correct weight. iOS loads that exact font file, so removing fontWeight prevents the extra weight transformation.Reacted by Razzle Huy Tran and trv-alinReacted by Razzle Huy Tran and sunny635533Reacted by Razzle Huy Tran, Alex Vasylchenko and meetp-zluckIn my experience, setting
fontWeighton Android completely ignoresfontFamilyand falls back to the default system font. Because of this, it seems thatfontWeightshouldn’t be used at all when working with custom fonts, on any platform.Reacted by aliamjad2, Bruno Gomes and Sumit DwivediReacted by Jeong Sang (정상)Workaround (RN 0.84, iOS): strip
fontWeightfor custom fonts at runtimeI transitioned from RN 0.79 -> 0.84 and hit the same “over‑bold” regression when using a custom
fontFamily.
The workaround below stripsfontWeightat render time only for custom fonts, without touching dozens of files.
This fixed the issue in our app, so sharing it here in case others are stuck with the same problem and need a temporary fix.Why patch
react/jsx-runtimein index.js instead ofReact.createElementin App.tsx?
Modern React (and React Native) uses the automatic JSX transform by default.
With this transform, JSX like<Text />is compiled to calls tojsx/jsxsfrom
react/jsx-runtime, not toReact.createElement.
So patchingReact.createElementwon’t intercept most JSX components.
Patchingreact/jsx-runtimeensures we catchTextelements created via JSX.// index.js (runs before app renders) import { AppRegistry, StyleSheet, Text } from 'react-native'; // Customize this list for your custom fonts: const CUSTOM_FONT_PREFIXES = [ 'NotoSans', // example // 'YourCustomFont', ]; const shouldStripWeight = (fontFamily) => CUSTOM_FONT_PREFIXES.some(prefix => fontFamily.startsWith(prefix)); const stripCustomFontWeight = (style) => { const flattened = StyleSheet.flatten(style); if (!flattened || typeof flattened.fontFamily !== 'string') return style; if (!shouldStripWeight(flattened.fontFamily) || flattened.fontWeight == null) return style; const { fontWeight, ...rest } = flattened; return rest; }; const patchJsxRuntimeForCustomFonts = () => { let jsxRuntime; try { jsxRuntime = require('react/jsx-runtime'); } catch (e) { return; } if (jsxRuntime.__customFontWeightPatched) return; const wrap = (fn) => (type, props, ...children) => { if (type === Text && props?.style) { const newStyle = stripCustomFontWeight(props.style); if (newStyle !== props.style) props = { ...props, style: newStyle }; } return fn(type, props, ...children); }; if (typeof jsxRuntime.jsx === 'function') jsxRuntime.jsx = wrap(jsxRuntime.jsx); if (typeof jsxRuntime.jsxs === 'function') jsxRuntime.jsxs = wrap(jsxRuntime.jsxs); if (typeof jsxRuntime.jsxDEV === 'function') jsxRuntime.jsxDEV = wrap(jsxRuntime.jsxDEV); jsxRuntime.__customFontWeightPatched = true; }; patchJsxRuntimeForCustomFonts(); AppRegistry.registerComponent(appName, () => App);
Reacted by thinhvd3-bap+1
Also facing the same issue. iOS only.+1
Also facing this.
btw @Ohmniox wouldn't there be a runtime overhead with this js-side hack? it works tho, I mean if everyone is patching this, thinking should we go with native side fix or the js side.
Edit: I don't think the native side patch will work because it would require us to disable RCT_USE_PREBUILT_RNCORE, requiring the react native core to be built from scratch
- added a commit that references this issue
on Jul 9, 2026 diff --git a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
index e1d5ca1..455b839 100644
--- a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+++ b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
@@ -903,7 +903,7 @@ const TextInput: component(
...props: React.ElementConfig
) = function TextInput({
ref: forwardedRef,- allowFontScaling = true,
-
allowFontScaling = false,
rejectResponderTermination = true,
underlineColorAndroid = 'transparent',
autoComplete,
diff --git a/node_modules/react-native/Libraries/Text/Text.js b/node_modules/react-native/Libraries/Text/Text.js
index 5a1e760..7b89055 100644
--- a/node_modules/react-native/Libraries/Text/Text.js
+++ b/node_modules/react-native/Libraries/Text/Text.js
@@ -286,7 +286,7 @@ const TextImpl: component(
let nativeText = null;processedProps.accessible = _accessible;
- processedProps.allowFontScaling = allowFontScaling !== false;
- processedProps.allowFontScaling = allowFontScaling === true;
processedProps.disabled = _disabled;
processedProps.ellipsizeMode = ellipsizeMode ?? 'tail';
processedProps.children = children;
diff --git a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
index 9b04cad..25ab7a4 100644
--- a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
+++ b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
@@ -361,7 +361,7 @@ static UIFontDescriptorSystemDesign RCTGetFontDescriptorSystemDesign(NSString *f
font = [UIFont fontWithName:fontProperties.family size:effectiveFontSize];
if (font != nullptr) {
fontNames = [UIFont fontNamesForFamilyName:font.familyName];
-
fontWeight = (fontWeight != 0.0) ?: RCTGetFontWeight(font);
-
fontWeight = fontWeight ?: RCTGetFontWeight(font); } else { // Failback to system font. font = RCTDefaultFontWithFontProperties(fontProperties);
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081Created a patch for the same, but still showing fonts in bold on iOS
Using 0.85.3Same issue here, this is the difference between iOS, and Android, it seems like Android, except that I'm using default font on Android. It seems like the bold text is not applied at all.
Description
I'm currently working on an app that's using a custom font, and am noticing a weird issue that has to do with font weight. Note that this issue only occurs on iOS; it looks fine when running on Android.
On React Native 0.82.1, when rendering a Text component with the style
sampleText: { fontFamily: [custom font, regular font weight], fontWeight: '200', fontSize: 30 },our text looked good. (It's the first screenshot posted below)
However, on React Native 0.83, when rendering text with the exact same style, I noticed that the font weight was much thicker than I expected it to be. (See the second screenshot). I noticed that if I removed "fontWeight: 200" from the associated style, then it looked better, and it rendered as I expected it to.
Is this an intentional change?
This reddit post might be related to this issue
Steps to reproduce
React Native Version
0.83.0
Affected Platforms
Runtime - iOS
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
None
Screenshots and Videos
Here’s what this issue looks like on React Native 0.82.1
Here’s what it looks like on React Native 0.83