diff --git a/frontend/src/index.css b/frontend/src/index.css
index e594311..ef572be 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -47,6 +47,11 @@
--font-display: "Playwrite HR Lijeva Variable", cursive;
--font-sans: "Jost Variable", sans-serif;
--font-serif: "Playfair Display Variable", serif;
+ --font-mono: "Space Mono", monospace;
+ --font-tamil: "Kavivanar", sans-serif;
+ --font-redact: "Redacted Script", cursive;
+ --font-slab: "Cutive Mono", monospace;
+ --font-hand: "Architects Daughter", cursive;
--color-glass-bg: rgba(28, 22, 16, 0.45);
--shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
--radius-xl: 1.5rem;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 719ab8a..56bbadc 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,9 +1,12 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+
import "./index.css";
+
import "@fontsource-variable/playwrite-hr-lijeva/wght.css";
import "@fontsource-variable/jost/wght.css";
import "@fontsource-variable/playfair-display/wght.css";
+
import App from "./App.tsx";
const root = document.getElementById("root");
diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx
index efa3bc2..548cd98 100644
--- a/frontend/src/pages/Editor.tsx
+++ b/frontend/src/pages/Editor.tsx
@@ -34,6 +34,12 @@ import { CryptoUtils } from "../utils/crypto";
import { formatRelativeDate } from "../utils/dateFormat";
import { decryptCanvasImages, encryptCanvasImages } from "../utils/letterLogic";
+import "@fontsource/kavivanar/index.css";
+import "@fontsource/space-mono/index.css";
+import "@fontsource/cutive-mono/index.css";
+import "@fontsource/architects-daughter/index.css";
+import "@fontsource/redacted-script/index.css";
+
type SaveOverlay = "IDLE" | "SAVING" | "SAVED" | "ERROR";
const OVERLAY_FADE_MS = 250;