Feature: Font selector and ligature toggle.

src/components/ui/Button.tsx

@@ -10,7 +10,7 @@ export default styled.button<Props>`
     padding: 8px;
     font-size: 16px;
     text-align: center;
-    font-family: 'Open Sans', sans-serif;
+    font-family: inherit;
 
     transition: 0.2s ease opacity;
     transition: 0.2s ease background-color;

src/components/ui/ComboBox.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 export default styled.select`
     padding: 8px;
     border-radius: 2px;
+    font-family: inherit;
     color: var(--secondary-foreground);
     background: var(--secondary-background);
 

src/components/ui/InputBox.tsx

@@ -9,6 +9,7 @@ export default styled.input<Props>`
     padding: 8px 16px;
     border-radius: 6px;
     
+    font-family: inherit;
     color: var(--foreground);
     background: var(--primary-background);
     transition: 0.2s ease background-color;

src/components/ui/TextArea.tsx

@@ -39,8 +39,10 @@ export default styled.textarea<TextAreaProps>`
     }
 
     ${ props => props.code ? css`
-        font-family: 'Fira Mono', 'Courier New', Courier, monospace;
+        font-family: var(--monoscape-font-font), monospace;
     ` : css`
-        font-family: 'Open Sans', sans-serif;
+        font-family: inherit;
     ` }
+    
+    font-variant-ligatures: var(--ligatures);
 `;