First go

will add comments in draft pull request

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

@@ -1,45 +1,3 @@
-@font-face {
-    font-family: "Fira_Sans";
-    src: url(../../../../assets/fonts/Fira_Sans/FiraSans-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Lato";
-    src: url(../../../../assets/fonts/Lato/Lato-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Libre_Baskerville";
-    src: url(../../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Merriweather";
-    src: url(../../../../assets/fonts/Merriweather/Merriweather-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Nanum_Gothic";
-    src: url(../../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "RocknRoll_One";
-    src: url(../../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "OpenDyslexic2";
-    src: url(../../../../assets/fonts/OpenDyslexic2/OpenDyslexic-Regular.woff2) format("woff2");
-    font-display: swap;
-}
-
 :root {
     --br-actionbar-button-text-color: #6c757d;
     --accordion-body-bg-color: black;

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

@@ -583,6 +583,15 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.bookService.getEpubFonts().subscribe(fonts => {
+      fonts.forEach(font => {
+        const fontFace = new FontFace(font.name, `url(${this.bookService.baseUrl}Font/download-font?fontId=${font.id})`);
+        fontFace.load().then(loadedFace => {
+          (document as any).fonts.add(loadedFace);
+        });
+      })
+    })
+
     const libraryId = this.route.snapshot.paramMap.get('libraryId');
     const seriesId = this.route.snapshot.paramMap.get('seriesId');
     const chapterId = this.route.snapshot.paramMap.get('chapterId');

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

@@ -19,7 +19,7 @@ import { ThemeProvider } from 'src/app/_models/preferences/site-theme';
 import { User } from 'src/app/_models/user';
 import { AccountService } from 'src/app/_services/account.service';
 import { ThemeService } from 'src/app/_services/theme.service';
-import { FontFamily, BookService } from '../../_services/book.service';
+import {BookService, EpubFont} from '../../_services/book.service';
 import { BookBlackTheme } from '../../_models/book-black-theme';
 import { BookDarkTheme } from '../../_models/book-dark-theme';
 import { BookWhiteTheme } from '../../_models/book-white-theme';
@@ -131,7 +131,7 @@ export class ReaderSettingsComponent implements OnInit {
    * List of all font families user can select from
    */
   fontOptions: Array<string> = [];
-  fontFamilies: Array<FontFamily> = [];
+  fontFamilies: Array<EpubFont> = [];
   /**
    * Internal property used to capture all the different css properties to render on all elements
    */
@@ -174,10 +174,11 @@ export class ReaderSettingsComponent implements OnInit {
     private readonly cdRef: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-
-    this.fontFamilies = this.bookService.getFontFamilies();
-    this.fontOptions = this.fontFamilies.map(f => f.title);
-    this.cdRef.markForCheck();
+    this.bookService.getEpubFonts().subscribe(fonts => {
+      this.fontFamilies = fonts;
+      this.fontOptions = fonts.map(f => f.name);
+      this.cdRef.markForCheck();
+    })
 
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       if (user) {
@@ -208,11 +209,10 @@ 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 => {
-          const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family;
-          if (familyName === 'default') {
+          if (fontName === 'default') {
             this.pageStyles['font-family'] = 'inherit';
           } else {
-            this.pageStyles['font-family'] = "'" + familyName + "'";
+            this.pageStyles['font-family'] = "'" + fontName + "'";
           }
 
           this.styleUpdate.emit(this.pageStyles);

UI/Web/src/app/book-reader/_services/book.service.ts

@@ -4,16 +4,19 @@ import { TextResonse } from 'src/app/_types/text-response';
 import { environment } from 'src/environments/environment';
 import { BookChapterItem } from '../_models/book-chapter-item';
 import { BookInfo } from '../_models/book-info';
+import {Observable} from "rxjs";
 
-export interface FontFamily {
-  /**
-   * What the user should see
-   */
-  title: string;
-  /**
-   * The actual font face
-   */
-  family: string;
+export enum FontProvider {
+  System = 1,
+  User = 2,
+}
+
+export interface EpubFont {
+  id: number;
+  name: string;
+  provider: FontProvider;
+  created: Date;
+  lastModified: Date;
 }
 
 @Injectable({
@@ -25,10 +28,8 @@ export class BookService {
 
   constructor(private http: HttpClient) { }
 
-  getFontFamilies(): Array<FontFamily> {
-    return [{title: 'default', family: 'default'}, {title: 'EBGaramond', family: 'EBGaramond'}, {title: 'Fira Sans', family: 'Fira_Sans'},
-    {title: 'Lato', family: 'Lato'}, {title: 'Libre Baskerville', family: 'Libre_Baskerville'}, {title: 'Merriweather', family: 'Merriweather'},
-    {title: 'Nanum Gothic', family: 'Nanum_Gothic'}, {title: 'RocknRoll One', family: 'RocknRoll_One'}, {title: 'Open Dyslexic', family: 'OpenDyslexic2'}];
+  getEpubFonts(): Observable<EpubFont[]>  {
+    return this.http.get<Array<EpubFont>>(this.baseUrl + 'Font/GetFonts')
   }
 
   getBookChapters(chapterId: number) {

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

@@ -166,7 +166,6 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
 
 
   constructor() {
-    this.fontFamilies = this.bookService.getFontFamilies().map(f => f.title);
     this.cdRef.markForCheck();
 
     this.accountService.getOpdsUrl().subscribe(res => {
@@ -174,6 +173,11 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
       this.cdRef.markForCheck();
     });
 
+    this.bookService.getEpubFonts().subscribe(res => {
+      this.fontFamilies = res.map(f => f.name);
+      this.cdRef.markForCheck();
+    })
+
     this.settingsService.getOpdsEnabled().subscribe(res => {
       this.opdsEnabled = res;
       this.cdRef.markForCheck();