add dynamic font preview - font buttons display in their own font family

Author: xcutiboo

src/components/forms/fonts-form/fonts-form.component.ts

@@ -1,7 +1,7 @@
 import { Component, computed, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { FontPresetsService } from '../../../services/font-presets.service';
+import { FontPresetsService, FontPreset } from '../../../services/font-presets.service';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
 import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
 import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
@@ -27,11 +27,13 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <button
                   type="button"
                   (click)="selectFont(font.family)"
+                  (mouseenter)="fontPresetsService.loadWebFont(font.family)"
                   [class.bg-kitty-primary]="fonts().font_family === font.family"
                   [class.text-kitty-dark]="fonts().font_family === font.family"
                   [class.bg-kitty-surface-light]="fonts().font_family !== font.family"
                   [class.text-kitty-text]="fonts().font_family !== font.family"
-                  class="px-3 py-2 rounded-lg text-xs font-mono hover:bg-kitty-primary hover:text-kitty-dark transition-colors border border-kitty-border"
+                  class="px-3 py-2 rounded-lg text-xs hover:bg-kitty-primary hover:text-kitty-dark transition-colors border border-kitty-border"
+                  [style.font-family]="getFontFamily(font)"
                   [title]="font.description"
                 >{{ font.name }}</button>
               }
@@ -47,11 +49,13 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <button
                   type="button"
                   (click)="selectFont(font.family)"
+                  (mouseenter)="fontPresetsService.loadWebFont(font.family)"
                   [class.bg-kitty-primary]="fonts().font_family === font.family"
                   [class.text-kitty-dark]="fonts().font_family === font.family"
                   [class.bg-kitty-surface-light]="fonts().font_family !== font.family"
                   [class.text-kitty-text]="fonts().font_family !== font.family"
-                  class="px-2 py-1.5 rounded text-xs font-mono hover:bg-kitty-primary hover:text-kitty-dark transition-colors border border-kitty-border"
+                  class="px-2 py-1.5 rounded text-xs hover:bg-kitty-primary hover:text-kitty-dark transition-colors border border-kitty-border"
+                  [style.font-family]="getFontFamily(font)"
                   [title]="font.description"
                 >{{ font.name }}</button>
               }
@@ -336,6 +340,10 @@ export class FontsFormComponent {
     this.helper.updateField('font_family', family);
   }
 
+  getFontFamily(font: FontPreset): string {
+    return `"${font.family}", monospace`;
+  }
+
   setFontFeatures(value: string): void {
     const features = value.split('\n').filter(l => l.trim());
     this.helper.updateField('font_features', features);