Use OpenFront font for version (#3795)

## Description:

<img width="276" height="178" alt="Screenshot 2026-04-29 at 4 18 23 PM"
src="https://github.com/user-attachments/assets/ed2d0416-00c2-4d55-8ee1-d7804b6276ab"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/Main.ts

@@ -1,5 +1,6 @@
 import version from "resources/version.txt?raw";
 import { UserMeResponse } from "../core/ApiSchemas";
+import { assetUrl } from "../core/AssetUrls";
 import { EventBus } from "../core/EventBus";
 import {
   GAME_ID_REGEX,
@@ -266,6 +267,13 @@ class Client {
     await customElements.whenDefined("mobile-nav-bar");
     await customElements.whenDefined("desktop-nav-bar");
 
+    const openFrontFont = new FontFace(
+      "OpenFront",
+      `url(${assetUrl("fonts/OpenFront.ttf")})`,
+    );
+    document.fonts.add(openFrontFont);
+    openFrontFont.load().catch(() => {});
+
     const versionElements = document.querySelectorAll(
       "#game-version, .game-version-display",
     );
@@ -275,6 +283,7 @@ class Client {
       const trimmed = version.trim();
       const displayVersion = trimmed.startsWith("v") ? trimmed : `v${trimmed}`;
       versionElements.forEach((el) => {
+        (el as HTMLElement).style.fontFamily = '"OpenFront", Inter, sans-serif';
         el.textContent = displayVersion;
       });
     }

src/client/styles.css

@@ -6,6 +6,7 @@
 @theme {
   --default-ring-width: 3px;
   --default-ring-color: var(--color-malibu-blue);
+  --font-display: "OpenFront", Inter, Arial, sans-serif;
 
   /* Openfront.io brand palette — see Openfront_Brand_Guidelines.pdf §4 */
   --color-malibu-blue: #0084d1;