Refactored how system fonts were loaded (at least covered for local development) so that instead of going through the api, they are instead resolved by using assets/fonts/{fontName}/{fontFile}.

UI/Web/src/app/_models/preferences/epub-font.ts

@@ -13,6 +13,5 @@ export interface EpubFont {
   id: number;
   name: string;
   provider: FontProvider;
-  created: Date;
-  lastModified: Date;
+  fileName: string;
 }

UI/Web/src/app/_services/font.service.ts

@@ -1,13 +1,12 @@
 import {DestroyRef, inject, Injectable} from "@angular/core";
 import {map, ReplaySubject} from "rxjs";
-import {EpubFont} from "../_models/preferences/epub-font";
+import {EpubFont, FontProvider} from "../_models/preferences/epub-font";
 import {environment} from 'src/environments/environment';
 import {HttpClient} from "@angular/common/http";
-import {EVENTS, MessageHubService} from "./message-hub.service";
+import {MessageHubService} from "./message-hub.service";
 import {NgxFileDropEntry} from "ngx-file-drop";
 import {AccountService} from "./account.service";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {NotificationProgressEvent} from "../_models/events/notification-progress-event";
 
 @Injectable({
   providedIn: 'root'
@@ -41,6 +40,10 @@ export class FontService {
   }
 
   getFontFace(font: EpubFont): FontFace {
+    if (font.provider === FontProvider.System) {
+      return new FontFace(font.name, `url('/assets/fonts/${font.name}/${font.fileName}')`);
+    }
+
     return new FontFace(font.name, `url(${this.baseUrl}font?fontId=${font.id}&apiKey=${this.encodedKey})`);
   }
 

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts

@@ -588,6 +588,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.fontService.getFonts().subscribe(fonts => {
       fonts.forEach(font => {
         this.fontService.getFontFace(font).load().then(loadedFace => {
+          console.log('loaded font: ', loadedFace);
           (this.document as any).fonts.add(loadedFace);
         });
       })

UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html

@@ -16,7 +16,9 @@
                   <div class="mb-3">
                     <label for="library-type" class="form-label">{{t('font-family-label')}}</label>
                     <select class="form-select" id="library-type" formControlName="bookReaderFontFamily">
-                      <option [value]="opt" *ngFor="let opt of fontOptions; let i = index">{{opt | titlecase}}</option>
+                      @for(opt of fontFamilies; track opt) {
+                        <option [value]="opt.name">{{opt.name | titlecase}}</option>
+                      }
                     </select>
                   </div>
                 </div>

UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts

@@ -85,6 +85,7 @@ export const bookColorThemes = [
 ];
 
 const mobileBreakpointMarginOverride = 700;
+const defaultFontFamily = 'Default';
 
 @Component({
     selector: 'app-reader-settings',
@@ -132,7 +133,6 @@ export class ReaderSettingsComponent implements OnInit {
   /**
    * List of all font families user can select from
    */
-  fontOptions: Array<string> = [];
   fontFamilies: Array<EpubFont> = [];
   /**
    * Internal property used to capture all the different css properties to render on all elements
@@ -178,7 +178,6 @@ export class ReaderSettingsComponent implements OnInit {
   ngOnInit(): void {
     this.fontService.getFonts().subscribe(fonts => {
       this.fontFamilies = fonts;
-      this.fontOptions = fonts.map(f => f.name);
       this.cdRef.markForCheck();
     })
 
@@ -187,7 +186,7 @@ export class ReaderSettingsComponent implements OnInit {
         this.user = user;
 
         if (this.user.preferences.bookReaderFontFamily === undefined) {
-          this.user.preferences.bookReaderFontFamily = 'default';
+          this.user.preferences.bookReaderFontFamily = defaultFontFamily;
         }
         if (this.user.preferences.bookReaderFontSize === undefined || this.user.preferences.bookReaderFontSize < 50) {
           this.user.preferences.bookReaderFontSize = 100;
@@ -211,7 +210,8 @@ export class ReaderSettingsComponent implements OnInit {
 
         this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
         this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(fontName => {
-          if (fontName === 'default') {
+          console.log('updating font-family to ', fontName);
+          if (fontName === defaultFontFamily) {
             this.pageStyles['font-family'] = 'inherit';
           } else {
             this.pageStyles['font-family'] = "'" + fontName + "'";

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -74,7 +74,6 @@ import {ManageScrobblingProvidersComponent} from "../manage-scrobbling-providers
 import {PdfLayoutModePipe} from "../../pdf-reader/_pipe/pdf-layout-mode.pipe";
 import {PdfTheme} from "../../_models/preferences/pdf-theme";
 import {PdfScrollMode} from "../../_models/preferences/pdf-scroll-mode";
-import {PdfLayoutMode} from "../../_models/preferences/pdf-layout-mode";
 import {PdfSpreadMode} from "../../_models/preferences/pdf-spread-mode";
 import {FontManagerComponent} from "../font-manager/font-manager/font-manager.component";
 import {FontService} from "../../_services/font.service";
@@ -234,7 +233,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
       this.user.preferences = results.pref;
 
       if (this.fontFamilies.indexOf(this.user.preferences.bookReaderFontFamily) < 0) {
-        this.user.preferences.bookReaderFontFamily = 'default';
+        this.user.preferences.bookReaderFontFamily = 'Default';
       }
 
       this.settingsForm.addControl('readingDirection', new FormControl(this.user.preferences.readingDirection, []));

UI/Web/src/styles.scss

@@ -53,7 +53,7 @@
 // Global Styles
 @font-face {
   font-family: "EBGarmond";
-  src: url("assets/fonts/EBGarmond/EBGaramond-VariableFont_wght.woff2") format("woff2");
+  src: url("assets/fonts/EB Garmond/EBGaramond-VariableFont_wght.woff2") format("woff2");
   font-display: swap;
 }