Add Custom font to website

dylanlangston · Jan 4, 2024 · 4fff67a · 4fff67a
1 parent 412a0c1
commit 4fff67a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/src/asteroids-website/src/app.postcss b/src/asteroids-website/src/app.postcss
@@ -3,6 +3,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face { 
+	font-family: "Hyperspace"; 
+	src: url("./HyperspaceBold.ttf"); 
+}
+
 input,
 textarea,
 button,
@@ -19,4 +24,4 @@ html {
 
 * {
 	@apply text-yellow-light;
-}
+}
diff --git a/src/asteroids-website/src/routes/+page.svelte b/src/asteroids-website/src/routes/+page.svelte
@@ -219,7 +219,7 @@
 />
 
 {#if $isLoading}
-	<StatusContainer spin={true} emoji={true} status={get(Module.statusMessage)} />
+	<StatusContainer spin={true} status={get(Module.statusMessage)} />
 {:else}
 	<div transition:fade={{ delay: 250, duration: 300 }} class="portrait:hidden">
 		<span in:fade={{ duration: 300 }} id="controls" class="hidden">
@@ -292,17 +292,17 @@
 			{/if}
 		</div>
 		{#key status}
-			<StatusContainer spin={starting} emoji={true} {status} />
+			<StatusContainer spin={starting} {status} />
 		{/key}
 	</div>
 
 	<div transition:fade={{ delay: 250, duration: 300 }} class="landscape:hidden">
-		<StatusContainer emoji={true}>
+		<StatusContainer>
 			<svelte:fragment slot="status-slot">
 				{#if isMobile}
-					{$_('page.Rotate')} 🔄
+					{$_('page.Rotate')}<span class="font-emoji">🔄</span>
 				{:else}
-					{$_('page.Resize')} ↔️
+					{$_('page.Resize')}<span class="font-emoji">↔️</span>
 				{/if}
 			</svelte:fragment>
 		</StatusContainer>

diff --git a/src/asteroids-website/src/routes/status-container.svelte b/src/asteroids-website/src/routes/status-container.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { fade, blur, fly, slide, scale } from 'svelte/transition';
 	export let status: string | undefined = undefined;
-	export let emoji: boolean = false;
 	export let spin: boolean = false;
 </script>
 
@@ -11,11 +10,11 @@
 	class="absolute flex top-0 bottom-0 left-0 right-0 items-center justify-center pointer-events-none -z-50"
 >
 	<div id="status-container" class="rounded-lg bg-green-light/[.5] shadow-xl p-8 m-8">
-		<div class="select-none text-center text-2xl lg:text-6xl font-bold" class:emoji id="status">
+		<div class="select-none text-center text-2xl lg:text-6xl font-bold" id="status">
 			<div class="jsonly" class:spin>
 				<slot name="status-slot" />
 				{#if status}
-					{status}
+					<span class="whitespace-pre-line">{status}</span>
 				{/if}
 			</div>
 			<noscript>Please enable Javascript to play.</noscript>
@@ -24,11 +23,6 @@
 </div>
 
 <style global lang="postcss">
-	.emoji {
-		font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Android Emoji, EmojiSymbols,
-			EmojiOne Mozilla, Twemoji Mozilla, Segoe UI Symbol, Noto Color Emoji Compat, emoji,
-			noto-emojipedia-fallback;
-	}
 	.spin {
 		@apply animate-spin;
 	}

diff --git a/src/asteroids-website/static/HyperspaceBold.ttf b/src/asteroids-website/static/HyperspaceBold.ttf
diff --git a/src/asteroids-website/tailwind.config.js b/src/asteroids-website/tailwind.config.js
@@ -21,7 +21,11 @@ export default {
 			animation: {
 				pingSlow: 'ping 1.5s ease-in-out infinite'
 			}
-		}
+		},
+		fontFamily: {
+			sans: ["Hyperspace", "sans-serif"],
+			emoji: ["Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", "Noto Color Emoji Compat", "emoji", "noto-emojipedia-fallback"]
+		},
 	},
 	plugins: []
 };