diff --git a/site/content/docs/5.3/examples/fonts/fonts.css b/site/content/docs/5.3/examples/fonts/fonts.css
index 2239a3a3d9..b1db9b6ffa 100644
--- a/site/content/docs/5.3/examples/fonts/fonts.css
+++ b/site/content/docs/5.3/examples/fonts/fonts.css
@@ -1,3 +1,15 @@
+@font-face {
+  font-family: "San Francisco";
+  font-weight: 400;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
+}
+
+@font-face {
+  font-family: "San Francisco";
+  font-weight: 700;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
+}
+
 .roboto {
   font-family: 'Roboto', sans-serif !important;
 }
@@ -19,7 +31,7 @@
 }
 
 .san-francisco {
-  font-family: 'SF Pro Display' !important;
+  font-family: 'San Francisco' !important;
 }
 
 .fw-400 {
diff --git a/site/content/docs/5.3/examples/fonts/index.html b/site/content/docs/5.3/examples/fonts/index.html
index 7bbe43a3c1..c294b4e45a 100644
--- a/site/content/docs/5.3/examples/fonts/index.html
+++ b/site/content/docs/5.3/examples/fonts/index.html
@@ -12,8 +12,7 @@
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> 
-<link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 
 <main class="p-5">
   <h1 class="visually-hidden">Fonts examples</h1>