diff --git a/scripts/build.ts b/scripts/build.ts
index 3a4536ce..a2eac7e9 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -139,6 +139,7 @@ const buildmap = {
     },
     loader: {
       ".svg": "dataurl",
+      ".woff2": "file",
     },
     plugins: [
       createRebuildLoggerPlugin("shinylive and Editor"),
diff --git a/src/Components/App.css b/src/Components/App.css
index 3fb4c6ab..865e29b2 100644
--- a/src/Components/App.css
+++ b/src/Components/App.css
@@ -1,15 +1,23 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/SourceSansPro-Regular.otf.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
 :root {
   --colors-grey: grey;
-  --colors-blue: #007BC2;
+  --colors-blue: #007bc2;
   --colors-blue-dark: hsl(207, 69%, 35%);
-  --colors-red: #C10000;
+  --colors-red: #c10000;
   --colors-white: white;
   --colors-bg: white;
   --colors-fg: #333;
 
   --font-face: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --font-size: 14px;
-  --font-mono-face: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-mono-face: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
   --font-mono-size: 12px;
 
   --panel-roundness: 5px;
diff --git a/src/fonts/SourceSansPro-Regular.otf.woff2 b/src/fonts/SourceSansPro-Regular.otf.woff2
new file mode 100644
index 00000000..d76e3909
Binary files /dev/null and b/src/fonts/SourceSansPro-Regular.otf.woff2 differ