From 07da2ff3e18bbb71f428985f185d5f971843ec26 Mon Sep 17 00:00:00 2001
From: ismarbesic <ismar.besic@hotmail.se>
Date: Mon, 15 Sep 2025 11:31:30 -0700
Subject: [PATCH] feat(ios): support condensed system font on fabric (#52259)

Summary:
This PR adds support for using the condensed system font on iOS when passing "SystemCondensed" as fontFamily. This behavior existed in the old architecture but was never ported to the new one, see [RCTFont.mm](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/RCTFont.mm#L434) as reference. Fixes https://github.com/facebook/react-native/issues/52258.

## Changelog:

[IOS] [ADDED] - Add support for condensed system font when using the new react native architecture.

Pull Request resolved: https://github.com/facebook/react-native/pull/52259

Test Plan:
Before:
<img width="275" src="https://github.com/user-attachments/assets/8744a5ae-252c-46db-b5f9-b803f3e1c671" />

After:
<img width="275" src="https://github.com/user-attachments/assets/69ec27a3-5c9a-46e3-a80a-0e02b76d8813" />

Reviewed By: cortinico

Differential Revision: D82208140

Pulled By: javache

fbshipit-source-id: b23a97c94bf45144c3f0860c30e35cae88c7dc2f
---
 .../textlayoutmanager/RCTFontUtils.mm         | 22 +++++++---
 .../js/examples/Text/TextExample.ios.js       | 44 ++++++-------------
 2 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
index 82151e6fb8b..c158c099be0 100644
--- a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
+++ b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
@@ -252,8 +252,11 @@ static UIFont *RCTDefaultFontWithFontProperties(RCTFontProperties fontProperties
   static std::mutex fontCacheMutex;
 
   CGFloat effectiveFontSize = fontProperties.sizeMultiplier * fontProperties.size;
-  NSString *cacheKey = [NSString
-      stringWithFormat:@"%.1f/%.2f/%ld", effectiveFontSize, fontProperties.weight, (long)fontProperties.style];
+  NSString *cacheKey = [NSString stringWithFormat:@"%@/%.1f/%.2f/%ld",
+                                                  fontProperties.family,
+                                                  effectiveFontSize,
+                                                  fontProperties.weight,
+                                                  (long)fontProperties.style];
   UIFont *font;
 
   {
@@ -267,11 +270,20 @@ static UIFont *RCTDefaultFontWithFontProperties(RCTFontProperties fontProperties
   if (font == nullptr) {
     font = [UIFont systemFontOfSize:effectiveFontSize weight:fontProperties.weight];
 
-    if (fontProperties.style == RCTFontStyleItalic) {
+    BOOL isItalicFont = fontProperties.style == RCTFontStyleItalic;
+    BOOL isCondensedFont = [fontProperties.family isEqualToString:@"SystemCondensed"];
+
+    if (isItalicFont || isCondensedFont) {
       UIFontDescriptor *fontDescriptor = [font fontDescriptor];
       UIFontDescriptorSymbolicTraits symbolicTraits = fontDescriptor.symbolicTraits;
 
-      symbolicTraits |= UIFontDescriptorTraitItalic;
+      if (isItalicFont) {
+        symbolicTraits |= UIFontDescriptorTraitItalic;
+      }
+
+      if (isCondensedFont) {
+        symbolicTraits |= UIFontDescriptorTraitCondensed;
+      }
 
       fontDescriptor = [fontDescriptor fontDescriptorWithSymbolicTraits:symbolicTraits];
       font = [UIFont fontWithDescriptor:fontDescriptor size:effectiveFontSize];
@@ -333,7 +345,7 @@ UIFont *RCTFontWithFontProperties(RCTFontProperties fontProperties)
         fontWeight = (fontWeight != 0.0) ?: RCTGetFontWeight(font);
       } else {
         // Failback to system font.
-        font = [UIFont systemFontOfSize:effectiveFontSize weight:fontProperties.weight];
+        font = RCTDefaultFontWithFontProperties(fontProperties);
       }
     }
 
diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js
index ab8ed5180e7..5fdff36d3bc 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.ios.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js
@@ -577,42 +577,23 @@ const examples = [
     description:
       ('Shows system font families including system-ui/ui-sans-serif, ui-serif, ui-monospace, and ui-rounded': string),
     render: function (): React.Node {
+      const baseTextStyle = {fontSize: 20};
       return (
-        <View testID={'ios-font-families'}>
-          <Text
-            style={{
-              fontFamily: 'system-ui',
-              fontSize: 32,
-              marginBottom: 20,
-            }}>
-            `fontFamily: system-ui` (same as `ui-sans-serif`)
+        <View testID={'ios-font-families'} style={{gap: 10}}>
+          <Text style={{...baseTextStyle, fontFamily: 'system-ui'}}>
+            system-ui (same as ui-sans-serif)
           </Text>
-          <Text
-            style={{
-              fontFamily: 'ui-sans-serif',
-              fontSize: 32,
-              marginBottom: 20,
-            }}>
-            `fontFamily: ui-sans-serif` (same as `system-ui`)
+          <Text style={{...baseTextStyle, fontFamily: 'ui-sans-serif'}}>
+            ui-sans-serif (same as system-ui)
           </Text>
-          <Text
-            style={{fontFamily: 'ui-serif', fontSize: 32, marginBottom: 20}}>
-            `fontFamily: ui-serif`
+          <Text style={{...baseTextStyle, fontFamily: 'ui-serif'}}>
+            ui-serif
           </Text>
-          <Text
-            style={{
-              fontFamily: 'ui-monospace',
-              fontSize: 32,
-              marginBottom: 20,
-            }}>
-            `fontFamily: ui-monospace`
+          <Text style={{...baseTextStyle, fontFamily: 'ui-monospace'}}>
+            ui-monospace
           </Text>
-          <Text
-            style={{
-              fontFamily: 'ui-rounded',
-              fontSize: 32,
-            }}>
-            `fontFamily: ui-rounded`
+          <Text style={{...baseTextStyle, fontFamily: 'ui-rounded'}}>
+            ui-rounded
           </Text>
         </View>
       );
@@ -767,6 +748,7 @@ const examples = [
             }}>
             Verdana bold
           </Text>
+          <Text style={{fontFamily: 'SystemCondensed'}}>SystemCondensed</Text>
           <Text style={{fontFamily: 'Unknown Font Family'}}>
             Unknown Font Family
           </Text>