diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 0a9c5f14e..56099ad06 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -67,8 +67,8 @@ const textVariants = {
       margin: 0,
     },
     modalHeadline: {
-      fontFamily: 'SF Pro',
       fontWeight: '600',
+      fontFamily: '$display',
       fontSize: '16px',
       lineHeight: '20px',
       color: '$grayText',
@@ -180,7 +180,7 @@ const textVariants = {
       color: 'white',
     },
     displaySettingsLabel: {
-      fontFamily: 'SF Pro',
+      fontFamily: '$display',
       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 931acae19..b6f284837 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: '$thTextSubtle2',
               fontSize: '13px',
               fontWeight: '400',
-              fontFamily: 'SF Pro',
+              fontFamily: '$display',
               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',
+                fontFamily: '$display',
                 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',
+                fontFamily: '$display',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 display: '-webkit-box',
@@ -213,7 +213,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 color: '$thTextSubtle3',
                 fontSize: '13px',
                 fontWeight: '400',
-                fontFamily: 'SF Pro',
+                fontFamily: '$display',
               }}
             >
               <SpanBox
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index fe2711bd0..e1e68909c 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: '$thTextSubtle2',
               fontSize: '10px',
               fontWeight: '500',
-              fontFamily: 'SF Pro',
+              fontFamily: '$display',
             }}
             distribution="start"
           >
@@ -167,7 +167,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                 fontWeight: '700',
                 lineHeight: '1.25',
                 maxWidth: '1200px',
-                fontFamily: 'SF Pro',
+                fontFamily: '$display',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 wordBreak: 'break-word',
@@ -183,7 +183,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                 color: '$thTextSubtle3',
                 fontSize: '11px',
                 fontWeight: '400',
-                fontFamily: 'SF Pro',
+                fontFamily: '$display',
               }}
             >
               <SpanBox
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 5a659a684..02aa57b03 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',
+            fontFamily: '$display',
             '&:hover': {
               textDecoration: 'underline',
             },
@@ -140,7 +140,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
       >
         <SpanBox
           css={{
-            fontFamily: 'SF Pro',
+            fontFamily: '$display',
             fontStyle: 'normal',
             fontWeight: '400',
             fontSize: '20px',
@@ -163,7 +163,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
         />
         <SpanBox
           css={{
-            fontFamily: 'SF Pro',
+            fontFamily: '$display',
             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 2ffa1c784..97742579f 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',
+    fontFamily: '$display',
     fontWeight: '600',
     fontSize: '9px',
     color: '#898989',
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index d80e7e2c6..63dafe42e 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -267,7 +267,7 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
         backgroundColor: selected ? '$thBackground2' : 'unset',
         fontSize: '14px',
         fontWeight: 'regular',
-        fontFamily: 'SF Pro Text',
+        fontFamily: '$display Text',
         color: '$thTextSubtle',
         verticalAlign: 'middle',
         borderRadius: '3px',
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 5d00ca853..88ffc9ccf 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -66,6 +66,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
     theme: {
       fonts: {
         inter: 'Inter, sans-serif',
+        display: '-apple-system, BlinkMacSystemFont, sans-serif',
       },
       fontSizes: {
         1: '0.75em',