feat: added possibility to use system fonts ⚡️

src/app/app.component.html

@@ -323,6 +323,19 @@
             mat-menu-item aria-label="Roboto italic">
       Roboto italic
     </button>
+    <mat-divider></mat-divider>
+    <button *ngIf="fetchFontsButtonActive"
+            (click)="openSetFontDialog(); $event.stopPropagation()"
+            mat-menu-item aria-label="Other font">
+      {{ 'MORE' | translate }} ...
+    </button>
+    <button *ngFor="let font of localFonts"
+            [style.font-family]="font.family"
+            [style.font-style]="font.style"
+            (click)="settings.fontFamily = font.family; settings.fontStyle = font.style"
+            mat-menu-item [attr.aria-label]="font.family">
+      {{ font.family }}
+    </button>
   </mat-menu>
   <cb-hashy-animated [christmas]="christmas"></cb-hashy-animated>
 </div>

src/app/app.component.ts

@@ -72,6 +72,15 @@ export class AppComponent implements OnInit {
   initialized = false;
   /** Whether it's Christmas currently. */
   christmas: boolean;
+  /** Whether the button 'Other' in the font selection dropdown is available. */
+  fetchFontsButtonActive = false;
+  /** Set of locally installed fonts. Will contain values after the user pressed on 'Other fonts' and granted access. */
+  localFonts : {
+    family: string,
+    fullName: string,
+    postscriptName?: string,
+    style: string,
+  }[] = [];
 
   /** Set the currently selected tab index (in the {@link DataService}). */
   set tabIndex(value: number) {
@@ -110,8 +119,9 @@ export class AppComponent implements OnInit {
     private readonly cache: CacheService,
     protected readonly settings: SettingsService,
     private readonly fileAccessService: FileAccessService,
-    cdr: ChangeDetectorRef,
+    private readonly cdr: ChangeDetectorRef,
   ) {
+    this.fetchFontsButtonActive = 'queryLocalFonts' in window;
     const date = new Date();
     this.christmas = date.getMonth() === 11 && date.getDate() <= 27;
     dataService.changeDetectionRequired.subscribe(() => cdr.markForCheck());
@@ -551,6 +561,27 @@ export class AppComponent implements OnInit {
     window.location.reload();
   }
 
+  /**
+   * Opens a dialog where the user can select any font from his local machine.
+   * The selected font will be saved to settings and used as default afterward.
+   */
+  openSetFontDialog(): void {
+    if (!('queryLocalFonts' in window)) {
+      throw new Error('Failed to load local fonts.');
+    }
+
+    (window as any).queryLocalFonts().then((fonts: {
+      family: string,
+      fullName: string,
+      postscriptName?: string,
+      style: string,
+    }[]) => {
+      this.localFonts = fonts;
+      this.fetchFontsButtonActive = false;
+      this.cdr.markForCheck();
+    });
+  }
+
   /**
    * Easter egg 🐰
    */

src/app/services/settings.service.ts

@@ -5,8 +5,6 @@ import {isTauri} from "@clipboardjesus/helpers";
 
 /** The boolean string value which is stored in the localstorage. */
 const TRUE = 'True';
-/** The available font types. */
-type Font = 'Victor Mono' | 'Roboto';
 
 /**
  * The service which provides all the settings
@@ -105,18 +103,21 @@ export class SettingsService {
   }
 
   /** Backing field */
-  private _fontFamily!: Font;
+  private _fontFamily!: string;
   /** Get the app font family. */
-  get fontFamily(): Font { return this._fontFamily; }
+  get fontFamily(): string { return this._fontFamily; }
   /** Set the app font family. */
-  set fontFamily(value: Font) {
+  set fontFamily(value: string) {
     this._fontFamily = value;
     if (value === 'Roboto') {
       SettingsService.setFontFamily('var(--font-family-roboto)');
       localStorage.removeItem(this.storageKeys.fontFamily);
-    } else {
+    } else if (value === 'Victor Mono') {
       SettingsService.setFontFamily('var(--font-family-victor)');
       localStorage.setItem(this.storageKeys.fontFamily, value);
+    } else {
+      SettingsService.setFontFamily(value);
+      localStorage.setItem(this.storageKeys.fontFamily, value);
     }
   }
 
@@ -158,7 +159,7 @@ export class SettingsService {
     this.alwaysOnTop = localStorage.getItem(this.storageKeys.alwaysOnTop) === TRUE;
     this.animationsDisabled = localStorage.getItem(this.storageKeys.animationsDisabled) === TRUE;
     this.language = localStorage.getItem(this.storageKeys.language) ?? 'en';
-    this.fontFamily = localStorage.getItem(this.storageKeys.fontFamily) as Font ?? 'Roboto';
+    this.fontFamily = localStorage.getItem(this.storageKeys.fontFamily) ?? 'Roboto';
     this.fontStyle = localStorage.getItem(this.storageKeys.fontStyle) ?? 'normal';
     this.dblClickMode = localStorage.getItem(this.storageKeys.dblClickMode) === TRUE;