diff --git a/src/components/Hyperchat.svelte b/src/components/Hyperchat.svelte
index 824a01e..57dc370 100644
--- a/src/components/Hyperchat.svelte
+++ b/src/components/Hyperchat.svelte
@@ -453,15 +453,14 @@
   };
 </script>
 
-<ReportBanDialog />
-<SuperchatViewDialog />
-
 <svelte:window on:resize={() => {
   scrollToBottom();
   topBarResized();
 }} on:load={onLoad} />
 
 <div class={containerClass} style="font-size: 13px">
+  <ReportBanDialog />
+  <SuperchatViewDialog />
   {#if $enableStickySuperchatBar}
     <StickyBar />
   {/if}
diff --git a/src/components/common/Dialog.svelte b/src/components/common/Dialog.svelte
index 4e84897..49c5b4d 100644
--- a/src/components/common/Dialog.svelte
+++ b/src/components/common/Dialog.svelte
@@ -14,7 +14,7 @@
   // Smelte's default is `{ duration: 150, easing: quadIn, delay: 150 }` which adds 150ms of dead
   // time before the open animation even starts. Drop the delay so the popup appears immediately.
   const transitionProps = { duration: 120, easing: quadIn, delay: 0 };
-  $: classes = `items-center z-50 rounded p-4 shadow ${bgColor}` +
+  $: classes = `items-center z-50 rounded p-4 shadow hc-dialog-font ${bgColor}` +
     ' max-h-full overflow-y-auto text-xs ' +
     (expandWidth ? 'w-full mx-2 ' : ' ') +
     ($$props.class ?? '');
@@ -33,3 +33,9 @@
   <slot />
   <slot name="actions" slot="actions" />
 </Dialog>
+
+<style>
+  :global(.hc-dialog-font) {
+    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system, sans-serif);
+  }
+</style>