Update font handling to better bundle fonts

src/application.js

@@ -218,8 +218,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		new MenuItem("__VERSION__", () => { alert("Thank you for using Pocket Bird! You are on version: __VERSION__") }, false),
 	];
 
-	const styleElement = document.createElement("style");
-
 	/** @type {Birb} */
 	let birb;
 
@@ -345,8 +343,8 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	}
 
 	function onLoad() {
-		styleElement.textContent = STYLESHEET;
-		document.head.appendChild(styleElement);
+		injectStyleElement(getContext().getFontStyles());
+		injectStyleElement(STYLESHEET);
 
 		birb = new Birb(BIRB_CSS_SCALE, CANVAS_PIXEL_SIZE, SPRITE_SHEET, SPRITE_WIDTH, SPRITE_HEIGHT, HATS_SPRITE_SHEET);
 		birb.setAnimation(Animations.BOB);
@@ -500,6 +498,18 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		birb.setY(birdY);
 	}
 
+	/**
+	 * @param {string|null} stylesheetContents
+	 */
+	function injectStyleElement(stylesheetContents) {
+		if (!stylesheetContents) {
+			return;
+		}
+		const element = document.createElement("style");
+		element.textContent = stylesheetContents;
+		document.head.appendChild(element);
+	}
+
 	/**
 	 * @param {StickyNote} stickyNote
 	 */
@@ -1013,8 +1023,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			}
 			return true;
 		});
-		/** @type {HTMLElement[]} */
-		const largeElements = Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH);
+		const largeElements = /** @type {HTMLElement[]} */ (Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH));
 		// Ensure the bird doesn't land on fixed or sticky elements
 		// const fixedAllowed = getContext() instanceof ObsidianContext;
 		// TODO: FIX

src/context.js

@@ -3,6 +3,7 @@ import { debug, log, error } from "./shared.js";
 export const SAVE_KEY = "birbSaveData";
 const ROOT_PATH = "";
 const SET_CONTEXT = "__CONTEXT__"
+const MONOCRAFT_URL = "__MONOCRAFT_URL__";
 
 /**
  * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -92,6 +93,13 @@ export class Context {
 	areStickyNotesEnabled() {
 		return true;
 	}
+
+	/**
+	 * @returns {string}
+	 */
+	getFontStyles() {
+		return getFontFaceImport(MONOCRAFT_URL);
+	}
 }
 
 export class LocalContext extends Context {
@@ -194,6 +202,16 @@ export class BrowserExtensionContext extends Context {
 		// @ts-expect-error
 		chrome.storage.sync.clear();
 	}
+
+	/**
+	 * @override
+	 * @returns {string}
+	 */
+	getFontStyles() {
+		// Use extension bundled font file
+		// @ts-expect-error
+		return getFontFaceImport(chrome.runtime.getURL('fonts/Monocraft.otf'));
+	}
 }
 
 export class ObsidianContext extends Context {
@@ -276,6 +294,14 @@ export class ObsidianContext extends Context {
 	}
 }
 
+/**
+ * @param {string} src
+ * @returns {string}
+ */
+function getFontFaceImport(src) {
+	return `@font-face { font-family: 'Monocraft'; src: url("${src}") format('opentype'); font-weight: normal; font-style: normal; }`;
+}
+
 /**
  * Parse URL parameters into a key-value map
  * @param {string} url

src/shared.js

@@ -1,9 +1,12 @@
+import { Context } from "./context";
+
 export const Directions = {
 	LEFT: -1,
 	RIGHT: 1,
 };
 
 let debugMode = location.hostname === "127.0.0.1";
+/** @type {Context|null} */
 let context = null;
 
 /**
@@ -20,6 +23,9 @@ export function setDebug(value) {
 	debugMode = value;
 }
 
+/**
+ * @returns {Context} The specific context for this platform
+ */
 export function getContext() {
 	if (!context) {
 		throw new Error("Context requested before being set");
@@ -27,6 +33,9 @@ export function getContext() {
 	return context;
 }
 
+/**
+ * @param {Context} newContext
+ */
 export function setContext(newContext) {
 	context = newContext;
 }

src/stylesheet.css

@@ -1,10 +1,3 @@
-@font-face {
-	font-family: 'Monocraft';
-	src: url("__MONOCRAFT_SRC__") format('opentype');
-	font-weight: normal;
-	font-style: normal;
-}
-
 :root {
 	--birb-border-size: 2px;
 	--birb-neg-border-size: calc(var(--birb-border-size) * -1);