diff --git a/apple/Text/RNSVGGlyphContext.mm b/apple/Text/RNSVGGlyphContext.mm
index 7e6d475be..dc9b2f277 100644
--- a/apple/Text/RNSVGGlyphContext.mm
+++ b/apple/Text/RNSVGGlyphContext.mm
@@ -104,6 +104,33 @@ - (void)pushContext:(RNSVGText *)node
 - (void)pushContext:(RNSVGGroup *)node font:(NSDictionary *)font;
 @end
 
+static NSString *RNSVGResolveGenericFontFamily(NSString *fontFamily)
+{
+  if ([fontFamily length] == 0) {
+    return nil;
+  }
+
+  NSString *normalizedFontFamily = [fontFamily lowercaseString];
+
+  if ([normalizedFontFamily isEqualToString:@"serif"]) {
+    return @"Georgia";
+  }
+  if ([normalizedFontFamily isEqualToString:@"sans-serif"]) {
+    return @"System";
+  }
+  if ([normalizedFontFamily isEqualToString:@"monospace"]) {
+    return @"Menlo";
+  }
+  if ([normalizedFontFamily isEqualToString:@"cursive"]) {
+    return @"Snell Roundhand";
+  }
+  if ([normalizedFontFamily isEqualToString:@"fantasy"]) {
+    return @"Papyrus";
+  }
+
+  return fontFamily;
+}
+
 @implementation RNSVGGlyphContext
 
 - (NSArray *)getFontContext
@@ -118,7 +145,7 @@ - (CTFontRef)getGlyphFont
   NSString *fontStyle = RNSVGFontStyleStrings[topFont_->fontStyle];
   NSString *fontWeight = RNSVGFontWeightStrings[topFont_->fontWeight];
   UIFont *font = [RCTFont updateFont:nil
-                          withFamily:[fontFamily isEqualToString:@""] ? nil : fontFamily
+                          withFamily:RNSVGResolveGenericFontFamily(fontFamily)
                                 size:@(isnan(size) ? 0 : size)
                               weight:fontWeight
                                style:fontStyle
diff --git a/apps/common/test/Test2976.tsx b/apps/common/test/Test2976.tsx
new file mode 100644
index 000000000..3c6fb2e74
--- /dev/null
+++ b/apps/common/test/Test2976.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Svg, Text} from 'react-native-svg';
+
+export default function Test2976() {
+  return (
+    <View style={{flex: 1, justifyContent: 'center', paddingHorizontal: 24}}>
+      <Svg height="160" width="100%">
+        <Text y="45" fontSize={28}>
+          System font: The quick brown fox
+        </Text>
+        <Text y="105" fontFamily="serif" fontSize={28}>
+          Serif font: The quick brown fox
+        </Text>
+      </Svg>
+    </View>
+  );
+}
diff --git a/apps/common/test/index.tsx b/apps/common/test/index.tsx
index 6a7568af0..fb03f09c6 100644
--- a/apps/common/test/index.tsx
+++ b/apps/common/test/index.tsx
@@ -37,6 +37,7 @@ import Test2471 from './Test2471';
 import Test2520 from './Test2520';
 import Test2670 from './Test2670';
 import Test2923 from './Test2923';
+import Test2976 from './Test2976';
 
 export default function App() {
   return <ColorTest />;