diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 07c8fb896..503be93dd 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -67,7 +67,7 @@ const textVariants = {
       margin: 0,
     },
     modalHeadline: {
-      fontFamily: 'SF Pro Display',
+      fontFamily: 'SF Pro',
       fontWeight: '600',
       fontSize: '16px',
       lineHeight: '20px',
@@ -180,7 +180,7 @@ const textVariants = {
       color: 'white',
     },
     displaySettingsLabel: {
-      fontFamily: 'SF Pro Display',
+      fontFamily: 'SF Pro',
       fontWeight: '500',
       fontSize: '12px',
       lineHeight: '20px',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 320e386aa..9b4ece533 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -121,7 +121,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               color: '#6A6968',
               fontSize: '13px',
               fontWeight: '400',
-              fontFamily: 'SF Pro Display',
+              fontFamily: 'SF Pro',
               minHeight: '35px',
             }}
             distribution="start"
@@ -176,7 +176,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 fontSize: '20px',
                 fontWeight: '700',
                 lineHeight: '1.25',
-                fontFamily: 'SF Pro Display',
+                fontFamily: 'SF Pro',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 wordBreak: 'break-word',
@@ -195,7 +195,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 fontSize: '13px',
                 fontWeight: '400',
                 lineHeight: '140%',
-                fontFamily: 'SF Pro Display',
+                fontFamily: 'SF Pro',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 display: '-webkit-box',
@@ -213,7 +213,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 color: '#898989',
                 fontSize: '13px',
                 fontWeight: '400',
-                fontFamily: 'SF Pro Display',
+                fontFamily: 'SF Pro',
               }}
             >
               <SpanBox
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index bbc124d2f..7f0d3d526 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -104,7 +104,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
               color: '#6A6968',
               fontSize: '10px',
               fontWeight: '500',
-              fontFamily: 'SF Pro Display',
+              fontFamily: 'SF Pro',
             }}
             distribution="start"
           >
@@ -167,7 +167,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                 fontWeight: '700',
                 lineHeight: '1.25',
                 maxWidth: '1200px',
-                fontFamily: 'SF Pro Display',
+                fontFamily: 'SF Pro',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 wordBreak: 'break-word',
@@ -183,7 +183,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                 color: '#898989',
                 fontSize: '11px',
                 fontWeight: '400',
-                fontFamily: 'SF Pro Display',
+                fontFamily: 'SF Pro',
               }}
             >
               <SpanBox
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 784da02bf..b86c5078a 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -59,7 +59,7 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
             display: 'flex',
             fontSize: '12px',
             fontWeight: '600',
-            fontFamily: 'SF Pro Display',
+            fontFamily: 'SF Pro',
             '&:hover': {
               textDecoration: 'underline',
             },
@@ -140,7 +140,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
       >
         <SpanBox
           css={{
-            fontFamily: 'SF Pro Display',
+            fontFamily: 'SF Pro',
             fontStyle: 'normal',
             fontWeight: '400',
             fontSize: '20px',
@@ -163,7 +163,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
         />
         <SpanBox
           css={{
-            fontFamily: 'SF Pro Display',
+            fontFamily: 'SF Pro',
             fontStyle: 'normal',
             fontWeight: '400',
             fontSize: '20px',
diff --git a/packages/web/components/templates/homeFeed/EditItemModals.tsx b/packages/web/components/templates/homeFeed/EditItemModals.tsx
index 3642bbf07..2ffa1c784 100644
--- a/packages/web/components/templates/homeFeed/EditItemModals.tsx
+++ b/packages/web/components/templates/homeFeed/EditItemModals.tsx
@@ -190,7 +190,7 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
   const titleStyle = {
     mt: '22px',
     mb: '2px',
-    fontFamily: 'SF Pro Display',
+    fontFamily: 'SF Pro',
     fontWeight: '600',
     fontSize: '9px',
     color: '#898989',