ultra super duper font combo

src/app.pcss

@@ -9,168 +9,254 @@
 /* global */
 
 html {
-  @apply !bg-base-200 scroll-smooth	overflow-x-hidden overflow-y-scroll;
+    @apply !bg-base-200 scroll-smooth	overflow-x-hidden overflow-y-scroll;
 }
 
+/* ############ FONTS ############ */
+
+/* ############ HEADINGS ############ */
+
+h1 {
+    @apply text-6xl font-black;
+}
+
+h2 {
+    @apply text-5xl font-extrabold;
+}
+
+h3 {
+    @apply text-4xl font-bold;
+}
+
+h4 {
+    @apply text-3xl font-semibold;
+}
+
+h5 {
+    @apply text-2xl font-medium;
+}
+
+h6 {
+    @apply text-xl font-normal;
+}
+
+/* ############ HEADINGS ############ */
+
+@font-face {
+    font-family: 'Orbitron-Variable';
+    src:
+        url('assets/fonts/Orbitron-VariableFont_wght.woff') format('woff'),
+        url('assets/fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
+    font-weight: 300 900;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'RobotoMono-Italic-Variable';
+    src:
+        url('assets/fonts/RobotoMono-Italic-VariableFont_wght.woff') format('woff'),
+        url('assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
+    font-weight: 300 900;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'RobotoMono-VariableFont';
+    src:
+        url('assets/fonts/RobotoMono-VariableFont_wght.woff') format('woff'),
+        url('assets/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
+    font-weight: 300 900;
+    font-display: swap;
+    font-style: italic;
+}
+
+/* ############ FONTS ############ */
+
+/* ############ FONTS CONFIG ############ */
+
+/* Normal text */
+body {
+    @apply font-['RobotoMono-VariableFont'];
+}
+
+/* Italic text outside prose */
+em {
+    @apply font-['RobotoMono-Italic-Variable'];
+}
+
+/* Prose text */
+.urara-prose {
+    @apply font-['RobotoMono-VariableFont'];
+}
+
+/* Italic text */
+.urara-prose em {
+    @apply font-['RobotoMono-Italic-Variable'];
+}
+
+/* ############ FONTS CONFIG ############ */
+
 ::selection {
-  @apply bg-primary/20;
+    @apply bg-primary/20;
 }
 
 /* .urara-prose */
 
 .urara-prose {
-  @apply !max-w-none;
+    @apply !max-w-none;
 }
 
 /* .urara-prose heading */
 
 .urara-prose > :is(h1, h2, h3, h4, h5) > a {
-  @apply no-underline font-bold;
+    @apply no-underline font-bold;
 }
 
 .urara-prose > :is(h1, h2, h3, h4, h5) > a::after {
-  @apply pl-2 text-base-200 transition-all content-['#'];
+    @apply pl-2 text-base-200 transition-all content-['#'];
 }
 
 .urara-prose > :is(h1, h2, h3, h4, h5):hover > a::after {
-  @apply text-primary;
+    @apply text-primary;
 }
 
 /* .urara-prose table */
 
 .urara-prose div > table > thead {
-  @apply border-0;
+    @apply border-0;
 }
 
 .urara-prose div > table > thead > tr > th {
-  @apply !relative;
+    @apply !relative;
 }
 
 /* .urara-prose a */
 
 .urara-prose :is(p, li) > a {
-  @apply bg-[length:100%_0.2em] hover:bg-[length:100%_100%] bg-[position:0_88%] bg-gradient-to-t from-secondary/50 to-secondary/40 bg-no-repeat transition-all ease-in-out !no-underline;
+    @apply bg-[length:100%_0.2em] hover:bg-[length:100%_100%] bg-[position:0_88%] bg-gradient-to-t from-secondary/50 to-secondary/40 bg-no-repeat transition-all ease-in-out !no-underline;
 }
 
 /* .urara-prose misc */
 
 .urara-prose > p img {
-  @apply w-full;
+    @apply w-full;
 }
 
 .urara-prose :is(p, li) > code {
-  @apply bg-base-200 px-2;
+    @apply bg-base-200 px-2;
 }
 
 .urara-prose li > input {
-  @apply checkbox checkbox-xs me-2 -my-0.5;
+    @apply checkbox checkbox-xs me-2 -my-0.5;
 }
 
 .urara-prose kbd {
-  @apply kbd;
+    @apply kbd;
 }
 
 .urara-prose hr {
-  @apply border-none divider;
+    @apply border-none divider;
 }
 
 /* footer a */
 
 footer a {
-  @apply !no-underline hover:text-primary hover:!underline transition-all;
+    @apply !no-underline hover:text-primary hover:!underline transition-all;
 }
 
 .spoiler {
-  @apply blur-sm hover:blur-none active:blur-none transition-all select-all;
+    @apply blur-sm hover:blur-none active:blur-none transition-all select-all;
 }
 
 /* .prose pre */
 
 .prose pre {
-  @apply mockup-code !bg-neutral min-w-0;
+    @apply mockup-code !bg-neutral min-w-0;
 }
 
 .prose pre:not(.shiki) {
-  @apply bg-neutral text-neutral-content;
+    @apply bg-neutral text-neutral-content;
 }
 
 .prose pre:not(.shiki)::before {
-  @apply sticky -left-5 -ml-5;
+    @apply sticky -left-5 -ml-5;
 }
 
 /* .urara-prose pre */
 
 @media (max-width: 768px) {
-  .urara-prose > pre {
-    @apply -mx-8 rounded-none;
-  }
+    .urara-prose > pre {
+        @apply -mx-8 rounded-none;
+    }
 }
 
 .urara-prose > pre {
-  @apply pb-0;
+    @apply pb-0;
 }
 
 .urara-prose > pre > div.code-container {
-  @apply pb-5 overflow-x-auto;
+    @apply pb-5 overflow-x-auto;
 }
 
 /* shiki */
 
 pre.shiki {
-  @apply px-0;
+    @apply px-0;
 }
 
 pre.shiki::before {
-  @apply sticky;
+    @apply sticky;
 }
 
 pre.shiki > div.code-title {
-  @apply absolute -mt-10 ml-20 pt-1.5 pl-1.5 opacity-50;
+    @apply absolute -mt-10 ml-20 pt-1.5 pl-1.5 opacity-50;
 }
 
 pre.shiki .language-id {
-  @apply hidden;
+    @apply hidden;
 }
 
 pre.shiki > .code-container {
-  @apply overflow-auto;
+    @apply overflow-auto;
 }
 
 :is(pre.shiki[text='true'], pre.shiki[svelte='true']) > div.code-container {
-  @apply mx-5;
+    @apply mx-5;
 }
 
 pre.shiki:not([text='true'], [svelte='true']) > .code-container > code > div.line > span:first-child {
-  @apply pl-5;
+    @apply pl-5;
 }
 
 pre.shiki:not([text='true'], [svelte='true']) > .code-container > code > div.line > span:last-child {
-  @apply pr-5;
+    @apply pr-5;
 }
 
 pre.shiki div.dim {
-  @apply opacity-50 transition-opacity;
+    @apply opacity-50 transition-opacity;
 }
 
 pre.shiki:hover div.dim {
-  @apply opacity-100;
+    @apply opacity-100;
 }
 
 pre.shiki div.highlight::before {
-  @apply bg-warning/20 absolute content-[''] w-full h-6;
+    @apply bg-warning/20 absolute content-[''] w-full h-6;
 }
 
 pre.twoslash data-lsp {
-  @apply border-b border-dashed border-transparent transition-all;
+    @apply border-b border-dashed border-transparent transition-all;
 }
 
 pre.twoslash:hover data-lsp {
-  @apply border-neutral-content/30;
+    @apply border-neutral-content/30;
 }
 
 pre.twoslash data-lsp:hover::before {
-  /* https://daisyui.com/blog/how-to-update-daisyui-4/#3-all--focus-colors-are-removed */
-  @apply content-[attr(lsp)] absolute rounded translate-y-5 bg-[color-mix(in_oklab,oklch(var(--n)),black_7%)] text-neutral-content font-mono whitespace-pre-wrap transition-all px-2 py-1 z-50;
+    /* https://daisyui.com/blog/how-to-update-daisyui-4/#3-all--focus-colors-are-removed */
+    @apply content-[attr(lsp)] absolute rounded translate-y-5 bg-[color-mix(in_oklab,oklch(var(--n)),black_7%)] text-neutral-content font-mono whitespace-pre-wrap transition-all px-2 py-1 z-50;
 }
 
 /* your code here */