site: use for web-font loading (so font is always visible)

src/routes/payday/+page.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import { onMount } from "svelte";
-	import { endOfMonth, isWeekend, sub, differenceInCalendarDays } from 'date-fns';
+  import {
+    endOfMonth,
+    isWeekend,
+    sub,
+    differenceInCalendarDays
+  } from "date-fns";
 
   let lastDayOfMonth = new Date();
   let daysUntilPayDay = 0;
 
   function prettyPrintDays(numberOfDays: number): string {
-		return `${numberOfDays} ${numberOfDays === 1 ? 'day' : 'days'}`;
+    return `${numberOfDays} ${numberOfDays === 1 ? "day" : "days"}`;
   }
 
   $: pluralisedDays = prettyPrintDays(Math.abs(daysUntilPayDay));
@@ -29,21 +34,26 @@
 <main>
   <section class="content">
     {#if daysUntilPayDay > 0}
-			<h1>The next Pay Day is</h1>
+      <h1>
-			<p class="days-away">In {pluralisedDays}</p>
+        Your next pay day is in <span style="display:none"
+          >{pluralisedDays}</span
+        >
+      </h1>
+      <p class="days-away" aria-hidden="true">{pluralisedDays}</p>
       <p class="day">
         The last working day of this month is <strong>
-					{Intl.DateTimeFormat('en-GB', {
+          {Intl.DateTimeFormat("en-GB", {
-						weekday: 'long',
+            weekday: "long",
-						month: 'long',
+            month: "long",
-						day: 'numeric'
+            day: "numeric"
           }).format(lastDayOfMonth)}</strong
         >
         <br />
-				That's only {prettyPrintDays(daysUntilPayDay - 1)} with Monzo's "get paid now"
+        That's only {prettyPrintDays(daysUntilPayDay - 1)} with Monzo's "get paid
+        now"
       </p>
     {:else}
-			<p>PayDay was {pluralisedDays} ago</p>
+      <p class="day">PayDay was {pluralisedDays} ago</p>
     {/if}
   </section>
 </main>
@@ -62,26 +72,32 @@
   }
 
   h1 {
-		font-size: 1rem;
+    font-size: 1.15rem;
     text-align: center;
     padding: 0;
+    margin: 0;
+    color: #111827;
   }
 
   .content {
     background: white;
     display: flex;
     flex-flow: column;
-		padding: 12px;
+    padding: 24px;
+    border-radius: 8px;
   }
 
   .days-away {
     font-size: 2rem;
     text-align: center;
+    line-height: 100%;
+    padding-top: 4px;
+    padding-bottom: 18px;
   }
 
   .day {
     font-size: 1.1rem;
-		text-align: center;
     padding: 0;
+    color: #374151;
   }
 </style>

src/styles/thomaswilson.css

@@ -1,6 +1,7 @@
 @font-face {
     font-family: 'FivoSansModern-Regular';
     src: url('/FivoSansModern-Regular.otf');
+    font-display: swap;
 }
 
 :root {