Font weight issue on React Native 0.83 when using custom font

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

Create a Text component
In its associated style in the stylesheet, add custom font and set a font weight
if you’re running on React Native 0.83, the font weight should be thicker than expected

React Native Version

0.83.0

Affected Platforms

Runtime - iOS

Output of `npx @react-native-community/cli info`

info Fetching system and libraries information...
System:
  OS: macOS 26.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 130.11 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.20.0
    path: /Users/jkozar/.nvm/versions/node/v22.20.0/bin/node
  Yarn:
    version: 4.6.0
    path: /Users/jkozar/.nvm/versions/node/v22.20.0/bin/yarn
  npm:
    version: 10.9.3
    path: /Users/jkozar/.nvm/versions/node/v22.20.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13840223
  Xcode:
    version: 26.1/17B55
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.0
    wanted: patch:react-native@npm%3A0.83.0#~/.yarn/patches/react-native-npm-0.83.0-577d0f2d83.patch
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

This isn’t a crash - it’s an issue with a custom font.

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

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.

I have same issue +1

same issue

Facing similar issue.

@ptptsw

Thank you for making a PR to fix this bug @ptptsw

Facing 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.

In my experience, setting fontWeight on Android completely ignores fontFamily and falls back to the default system font. Because of this, it seems that fontWeight shouldn’t be used at all when working with custom fonts, on any platform.

Workaround (RN 0.84, iOS): strip `fontWeight` for custom fonts at runtime

I transitioned from RN 0.79 -> 0.84 and hit the same “over‑bold” regression when using a custom fontFamily.
The workaround below strips fontWeight at 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-runtime in index.js instead of React.createElement in App.tsx?
Modern React (and React Native) uses the automatic JSX transform by default.
With this transform, JSX like <Text /> is compiled to calls to jsx/jsxs from
react/jsx-runtime, not to React.createElement.
So patching React.createElement won’t intercept most JSX components.
Patching react/jsx-runtime ensures we catch Text elements 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);

@Ohmniox

I'm facing the same issue (React native 0.84.1)

Do we have any updates?

btw @Ohmniox your workaround works, thank you!

+1
Also facing the same issue. iOS only.

@Ohmniox

+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

Fix custom font weight rendering heaviest face on iOS Fabric (react#5…

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=8081

Created a patch for the same, but still showing fonts in bold on iOS
Using 0.85.3

Fix custom font weight rendering heaviest face on iOS Fabric (#57483)

Same 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.

Navigation Menu

Repository navigation

Font weight issue on React Native 0.83 when using custom font #54934

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Issue (RN 0.83, iOS)

Workaround (RN 0.84, iOS): strip `fontWeight` for custom fonts at runtime

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Font weight issue on React Native 0.83 when using custom font #54934

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx @react-native-community/cli info

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Activity

react-native-bot commented on Dec 18, 2025

ertucaglar commented on Dec 19, 2025

mustafaabobakr commented on Dec 21, 2025

SameedSharif-cmyk commented on Dec 23, 2025

jaredrkozar commented on Dec 26, 2025

uday-zluck commented on Dec 31, 2025

uday-zluck commented on Jan 1, 2026

Issue (RN 0.83, iOS)

VariabileAleatoria commented on Jan 23, 2026

Ohmniox commented on Mar 24, 2026

Workaround (RN 0.84, iOS): strip fontWeight for custom fonts at runtime

alissonph commented on Apr 8, 2026

eddietex commented on Jun 1, 2026

notsuhas commented on Jun 8, 2026

Hemantkml commented on Aug 19, 2026

iamvinny commented on Sep 1, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`

Workaround (RN 0.84, iOS): strip `fontWeight` for custom fonts at runtime