Working

src/routes/private/+layout.server.ts

@@ -0,0 +1,5 @@
+/**
+ * This file is necessary to ensure protection of all routes in the `private`
+ * directory. It makes the routes in this directory _dynamic_ routes, which
+ * send a server request, and thus trigger `hooks.server.ts`.
+ **/

src/routes/private/home/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+
+</script>
+
+
+heyy

src/routes/private/scanner/+page.svelte

@@ -27,6 +27,12 @@
 	});
 </script>
 
+<style>
+.robo {
+	font-family: "Roboto", sans-serif;
+}
+</style>
+
 <QRScanner bind:message={scanned_id} />
 
 {#if scan_state === ScanState.scan_successful}
@@ -34,9 +40,9 @@
 {/if}
 
 {#if scan_state === ScanState.scan_failed}
-	<p>Scan failed. Please try again.</p>
+	<p class="robo">Scan failed. Please try again.</p>
 {/if}
 
 {#if scan_state === ScanState.scanning}
-	<p>Fetching data...</p>
+	<p class="robo">Fetching data...</p>
 {/if}

src/routes/private/scanner/QRScanner.svelte

@@ -4,8 +4,7 @@
         Html5QrcodeScanner,
         type Html5QrcodeResult,
         Html5QrcodeScanType,
-        Html5QrcodeSupportedFormats,
-        Html5QrcodeScannerState,
+        Html5QrcodeSupportedFormats
     } from 'html5-qrcode';
 
     let width: number = 300;

src/routes/private/scanner/TicketDisplay.svelte

@@ -4,5 +4,11 @@
 	let { ticket_data }: { ticket_data: TicketData } = $props();
 </script>
 
-<p>{ticket_data.name}</p>
+<p class="robo">{ticket_data.name}</p>
 <p>{ticket_data.surname}</p>
+
+<style>
+.robo {
+	font-family: var(--font-display);
+}
+</style>