Feature: Font selector and ligature toggle.

src/styles/_fonts.scss

@@ -1,6 +0,0 @@
-@import "@fontsource/open-sans/300.css";
-@import "@fontsource/open-sans/400.css";
-@import "@fontsource/open-sans/600.css";
-@import "@fontsource/open-sans/700.css";
-
-@import "@fontsource/open-sans/400-italic.css";

src/styles/_page.scss

@@ -18,7 +18,9 @@ html,
 body {
     margin: 0;
     height: 100%;
-    font-family: "Open Sans", sans-serif;
+    font-family: var(--font), sans-serif;
+    font-variant-ligatures: var(--ligatures);
+
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     caret-color: var(--accent);

src/styles/_variables.scss

@@ -1,4 +1,7 @@
 :root {
+    --ligatures: none;
+    --font: "Open Sans";
     --app-height: 100vh;
+    --codeblock-font: "Fira Code";
     --sidebar-active: var(--secondary-background);
 }

src/styles/index.scss

@@ -1,7 +1,6 @@
 @import "variables";
 @import "context-menu";
 @import "elements";
-@import "fonts";
 @import "page";
 
 @import "react-overlapping-panels/dist";