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

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);
       }
     }
 

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>