WEB-955: implement default font customization setting

src/app/settings/settings.component.html

@@ -91,7 +91,7 @@
 
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
-          <mat-select>
+          <mat-select [formControl]="fontFamily">
             @for (font of fonts; track font) {
               <mat-option [value]="font">
                 {{ font }}

src/app/settings/settings.component.ts

@@ -103,36 +103,52 @@ export class SettingsComponent implements OnInit, OnDestroy {
     '7',
     '8'
   ];
-  /** Placeholder for fonts. */
-  fonts: any;
+  /** List of available fonts. */
+  fonts: string[] = [
+    'Roboto',
+    'Inter',
+    'Open Sans',
+    'Outfit',
+    'Montserrat'
+  ];
 
   /** Date Format Setting */
   dateFormat = new FormControl('');
   /** Datetime Format Setting */
   datetimeFormat = new FormControl('');
   /** Decimals to Display Setting */
   decimalsToDisplay = new FormControl('');
+  /** Font Family Setting */
+  fontFamily = new FormControl('');
 
   private initialValues: {
     dateFormat: string;
     datetimeFormat: string;
     decimals: string;
+    fontFamily: string;
   };
 
   ngOnInit() {
     this.initialValues = {
       dateFormat: this.settingsService.dateFormat,
       datetimeFormat: this.settingsService.datetimeFormat,
-      decimals: this.settingsService.decimals
+      decimals: this.settingsService.decimals,
+      fontFamily: this.settingsService.fontFamily
     };
     this.dateFormat.patchValue(this.initialValues.dateFormat, { emitEvent: false });
     this.datetimeFormat.patchValue(this.initialValues.datetimeFormat, { emitEvent: false });
     this.decimalsToDisplay.patchValue(this.initialValues.decimals, { emitEvent: false });
+    this.fontFamily.patchValue(this.initialValues.fontFamily, { emitEvent: false });
     this.trackChanges();
   }
 
   trackChanges(): void {
-    merge(this.dateFormat.valueChanges, this.datetimeFormat.valueChanges, this.decimalsToDisplay.valueChanges)
+    merge(
+      this.dateFormat.valueChanges,
+      this.datetimeFormat.valueChanges,
+      this.decimalsToDisplay.valueChanges,
+      this.fontFamily.valueChanges
+    )
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.hasChanges = this.hasFormChanged();
@@ -143,18 +159,21 @@ export class SettingsComponent implements OnInit, OnDestroy {
     return (
       (this.dateFormat.value ?? '') !== this.initialValues.dateFormat ||
       (this.datetimeFormat.value ?? '') !== this.initialValues.datetimeFormat ||
-      (this.decimalsToDisplay.value ?? '') !== this.initialValues.decimals
+      (this.decimalsToDisplay.value ?? '') !== this.initialValues.decimals ||
+      (this.fontFamily.value ?? '') !== this.initialValues.fontFamily
     );
   }
 
   submit(): void {
     this.settingsService.setDateFormat(this.dateFormat.value ?? this.initialValues.dateFormat);
     this.settingsService.setDatetimeFormat(this.datetimeFormat.value ?? this.initialValues.datetimeFormat);
     this.settingsService.setDecimalToDisplay(this.decimalsToDisplay.value ?? this.initialValues.decimals);
+    this.settingsService.setFontFamily(this.fontFamily.value ?? this.initialValues.fontFamily);
     this.initialValues = {
       dateFormat: this.dateFormat.value ?? '',
       datetimeFormat: this.datetimeFormat.value ?? '',
-      decimals: this.decimalsToDisplay.value ?? ''
+      decimals: this.decimalsToDisplay.value ?? '',
+      fontFamily: this.fontFamily.value ?? ''
     };
     this.hasChanges = false;
     this.alertService.alert({

src/app/settings/settings.service.ts

@@ -299,4 +299,16 @@ export class SettingsService {
   get themeDarkEnabled(): boolean {
     return JSON.parse(localStorage.getItem('mifosXThemeDarkEnabled'));
   }
+
+  setFontFamily(font: string) {
+    localStorage.setItem('mifosXFontFamily', JSON.stringify(font));
+  }
+
+  get fontFamily(): string {
+    const userSetting = localStorage.getItem('mifosXFontFamily');
+    if (userSetting) {
+      return JSON.parse(userSetting);
+    }
+    return 'Roboto';
+  }
 }

src/app/web-app.component.ts

@@ -157,6 +157,12 @@ export class WebAppComponent implements OnInit, OnDestroy {
     this.themingService.setInitialDarkMode();
     this.themingService.setDarkMode(!!this.settingsService.themeDarkEnabled);
 
+    // Apply saved font preference
+    const activeFont = this.settingsService.fontFamily;
+    if (activeFont) {
+      document.body.style.fontFamily = `"${activeFont}", sans-serif`;
+    }
+
     // Setup logger
     if (environment.production) {
       Logger.enableProductionMode();
@@ -213,6 +219,12 @@ export class WebAppComponent implements OnInit, OnDestroy {
 
     // Setup alerts with hover behavior
     this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
+      if (alertEvent.type === 'Settings Update') {
+        const activeFont = this.settingsService.fontFamily;
+        if (activeFont) {
+          document.body.style.fontFamily = `"${activeFont}", sans-serif`;
+        }
+      }
       const snackBarRef = this.snackBar.open(
         `${alertEvent.message}`,
         this.translateService.instant('labels.buttons.Close'),

src/index.html

@@ -28,6 +28,10 @@
       rel="stylesheet"
     />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Montserrat:wght@300;400;500;700&family=Open+Sans:wght@300;400;500;700&family=Outfit:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
     <!-- Load environment variables -->
   </head>
   <body class="h-full">