fix(app): startup due to lacking FontFace implementation in Firefox

Source: #2432
Closes #2432

frontend/src/main.ts

@@ -5,6 +5,7 @@
  */
 import { createApp } from 'vue';
 import { routes } from 'vue-router/auto-routes';
+import { getFontFaces } from '@/utils/data-manipulation';
 import Root from '@/App.vue';
 import { hideDirective } from '@/plugins/directives';
 import { vuePlugin as i18n } from '@/plugins/i18n';
@@ -44,7 +45,7 @@ app.directive('hide', hideDirective);
  */
 await Promise.all([
   router.isReady(),
-  ...[...document.fonts.keys()].map(font => font.load())
+  ...getFontFaces().map(font => font.load())
 ]);
 await document.fonts.ready;
 

frontend/src/utils/data-manipulation.ts

@@ -31,3 +31,25 @@ export function mergeExcludingUnknown<T extends object, K extends keyof T>(
 export function upperFirst<T extends string>(str: T): Capitalize<T> {
   return (str[0].toUpperCase() + str.slice(1)) as Capitalize<T>;
 }
+
+/**
+ * Get the font faces present in the document.
+ *
+ * Instead of using a normal iterable (like `...[...document.fonts.keys()]`),
+ * we need this for Firefox compatibility.
+ *
+ * See https://github.com/jellyfin/jellyfin-vue/issues/2432
+ */
+export function getFontFaces() {
+  const iterable = document.fonts.keys();
+  const results = [];
+  let iterator = iterable.next();
+
+  while (iterator.done === false) {
+    results.push(iterator.value);
+
+    iterator = iterable.next();
+  }
+
+  return results;
+}