diff --git a/public/fonts/AngelicAgrippaRegular.woff2 b/public/fonts/AngelicAgrippaRegular.woff2
new file mode 100644
index 0000000..523b4a7
Binary files /dev/null and b/public/fonts/AngelicAgrippaRegular.woff2 differ
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index 43dba8e..b76096f 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -146,6 +146,10 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
             },
           },
 
+          Angelic: {
+            component: (comProps) => <span className="font-angelic">{comProps.children}</span>,
+          },
+
           Video: {
             component: (comProps) => (
               <VideoPlayer
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0fe42e5..5a141fc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -14,6 +14,7 @@ import "styles/formatted.css";
 import "styles/others.css";
 import "styles/rc-slider.css";
 import "styles/tippy.css";
+import "styles/fonts.css";
 
 import { useLocalData } from "contexts/localData";
 import { LightBoxProvider } from "contexts/LightBoxProvider";
diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx
index ea8298b..0007491 100644
--- a/src/pages/dev/editor.tsx
+++ b/src/pages/dev/editor.tsx
@@ -329,6 +329,14 @@ const Editor = (props: Props): JSX.Element => {
           <Button onClick={() => toggleWrap("`")} icon="code" />
         </ToolTip>
 
+        <ToolTip placement="bottom" content={<h3 className="text-lg">Toggle Angelic/Celestial</h3>}>
+          <Button
+            onClick={() => toggleWrap("Angelic", {})}
+            text="m"
+            className="w-14 font-angelic font-bold"
+          />
+        </ToolTip>
+
         <ButtonGroup
           buttonsProps={[
             {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index da78735..9189b5c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -45,7 +45,7 @@ const Home = (props: PostStaticProps): JSX.Element => {
             [mask:url('/icons/accords.svg')]"
           />
           <h1 className="mb-0 text-5xl">Accord&rsquo;s Library</h1>
-          <h2 className="-mt-5 text-xl">Discover • Analyze • Translate • Archive</h2>
+          <h2 className="-mt-5 font-angelic text-lg">Discover • Analyze • Translate • Archive</h2>
         </div>
       }
       displayTitle={false}
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 0000000..2713993
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Angelic Agrippa";
+  src: url("/fonts/AngelicAgrippaRegular.woff2") format("woff2");
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0ad2c4e..76fcd14 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,6 +21,7 @@ export default {
       body: "var(--theme-font-body)",
       headers: "var(--theme-font-headers)",
       mono: "var(--theme-font-mono)",
+      angelic: "Angelic Agrippa",
       realmono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace`,
       ...fonts,