Add pixeloid font to the pixel theme

lucianoratamero · Aug 13, 2024 · 5ce574c · 5ce574c
1 parent 43c6f88
commit 5ce574c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/lib/fonts/PixeloidMono.ttf b/src/lib/fonts/PixeloidMono.ttf
diff --git a/src/routes/twitch-chat/+page.svelte b/src/routes/twitch-chat/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	// @ts-ignore
+	import PixeloidMono from '$lib/fonts/PixeloidMono.ttf';
 	import ComfyJS, { type OnMessageExtra } from 'comfy.js';
 	import { onMount } from 'svelte';
 	// @ts-ignore
@@ -617,6 +618,8 @@
 	});
 </script>
 
+<link rel="preload" href={PixeloidMono} as="font" type="font/ttf" crossorigin="anonymous" />
+
 {#if error}
 	<div>Channel not found :\ Please put the channel name as the `channel` search parameter.</div>
 {/if}
@@ -628,3 +631,13 @@
 		</div>
 	{/each}
 </div>
+
+<style>
+	@font-face {
+		font-family: 'Pixeloid Mono';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: url('$lib/fonts/PixeloidMono.ttf') format('ttf');
+	}
+</style>
diff --git a/src/routes/twitch-chat/themes/pixel.scss b/src/routes/twitch-chat/themes/pixel.scss
@@ -168,8 +168,7 @@
 #chat.pixel {
 	@apply gap-2;
 	& .message {
-		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-			'Courier New', monospace;
+		font-family: 'Pixeloid Mono', ui-monospace, monospace;
 
 		@apply font-bold;
 		@apply bg-black;