diff --git a/posthog/year_in_posthog/2023.html b/posthog/year_in_posthog/2023.html
index 4c0f94891e78d..bdce0e0e20269 100644
--- a/posthog/year_in_posthog/2023.html
+++ b/posthog/year_in_posthog/2023.html
@@ -13,8 +13,10 @@
     {% else %}
         <link rel="shortcut icon" href="/static/icons/favicon-dev.ico?v=2021-04-29">
     {% endif %}
-    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff" as="font" type="font/woff" crossorigin>
+{#    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2" as="font" type="font/woff2"#}
+{#          crossorigin="anonymous">#}
+{#    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2" as="font" type="font/woff2"#}
+{#          crossorigin="anonymous">#}
     <link rel="preload" href="{% static image_webp %}" as="image">
     <link rel="preload" href="{% static 'year_in_hog/background.png' %}" as="image">
     <script>
@@ -50,23 +52,43 @@
         })
     </script>
     {# can defer loading of the tooltip css #}
-    <link rel="preload" href="https://unpkg.com/microtip@0.2.2/microtip.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://unpkg.com/microtip@0.2.2/microtip.css"></noscript>
+    <link rel="preload" href="https://unpkg.com/microtip@0.2.2/microtip.css" as="style"
+          onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://unpkg.com/microtip@0.2.2/microtip.css">
+    </noscript>
     <style>
+        /* Matter; bold (800); latin */
+        @font-face {
+            font-family: MatterSQ;
+            font-style: normal;
+            font-weight: 800;
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff') format('woff');
+            font-display: swap;
+        }
+
+        /* Matter; bold (700); latin */
         @font-face {
             font-family: MatterSQ;
             font-style: normal;
             font-weight: 700;
-            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff) format("woff");
-            font-display: swap
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff') format('woff');
+            font-display: swap;
         }
 
+        /* Matter; medium (500); latin */
         @font-face {
             font-family: MatterSQ;
             font-style: normal;
             font-weight: 500;
-            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff) format("woff");
-            font-display: swap
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff') format('woff');
+            font-display: swap;
         }
 
         html {