diff --git a/public/Cascadia.ttf b/public/Cascadia.ttf
new file mode 100644
index 000000000..fee603fa2
Binary files /dev/null and b/public/Cascadia.ttf differ
diff --git a/public/index.html b/public/index.html
index 27b27d483..2d4ba21f7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -55,6 +55,13 @@
       type="font/ttf"
       crossorigin="anonymous"
     />
+    <link
+      rel="preload"
+      href="https://uploads.codesandbox.io/uploads/user/5f5b1ecd-ac15-4c7f-803e-e11ff53ea4ce/z1tp-Cascadia.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
 
     <script
       async
diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index 43830b62d..1f26e0c0d 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -248,7 +248,7 @@ export const actionChangeFontFamily: Action = {
         options={[
           { value: "Virgil", text: "Hand-drawn" },
           { value: "Helvetica", text: "Normal" },
-          { value: "Courier", text: "Code" }
+          { value: "Cascadia", text: "Code" }
         ]}
         value={getSelectedAttribute(
           elements,
diff --git a/src/styles.scss b/src/styles.scss
index f4fa7c7c4..bfb3637b6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,13 @@
   font-display: swap;
 }
 
+/* https://github.com/microsoft/cascadia-code */
+@font-face {
+  font-family: "Cascadia";
+  src: url("https://uploads.codesandbox.io/uploads/user/5f5b1ecd-ac15-4c7f-803e-e11ff53ea4ce/z1tp-Cascadia.ttf");
+  font-display: swap;
+}
+
 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;