WEB-955: implement default font customization setting

[RiteshGite]

Description

Implemented the missing "Default Font" customization setting in the Settings view.

This change enables users to select and persist their preferred application font across sessions. The selected font is dynamically applied globally throughout the application at runtime.

The implementation includes:

• Adding local storage persistence support for selected fonts
• Initializing supported font options in the settings component
• Binding the font selector using Angular Reactive Forms
• Applying the selected font globally during application startup
• Dynamically updating typography after settings changes
• Loading required Google Fonts for proper rendering support

Related issues and discussion

#WEB-955

Screenshots, if any

Before

Empty and non-functional Default Font dropdown.

After

Working Default Font selector with persisted global typography changes.

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

New Features

• Users can now select their preferred font from Settings
• Font preferences are automatically saved and applied across the app
• New font options available: Inter, Montserrat, Open Sans, and Outfit

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 021ef9db-af49-4c24-a238-c1391268bfb9

📥 Commits

Reviewing files that changed from the base of the PR and between 1f9eaad and ccb787f.

📒 Files selected for processing (5)

• src/app/settings/settings.component.html
• src/app/settings/settings.component.ts
• src/app/settings/settings.service.ts
• src/app/web-app.component.ts
• src/index.html

---

Walkthrough

This PR adds user-selectable font family preferences to the settings component. Users can choose from a list of fonts, which is saved to localStorage, applied to the document on startup, and reapplied when settings are updated. Additional Google Fonts are loaded to support the available selections.

Changes

Font family selection feature

Layer / File(s)	Summary
Font preference persistence API src/app/settings/settings.service.ts	SettingsService adds setFontFamily(font: string) method and fontFamily getter property to persist font preference to localStorage with 'Roboto' as default fallback.
Settings form control and HTML binding src/app/settings/settings.component.ts, src/app/settings/settings.component.html	SettingsComponent declares a concrete fonts list and fontFamily FormControl, initializes it from the service in ngOnInit, includes it in change tracking via trackChanges() observable, validates form state in hasFormChanged(), persists via service in submit(), and binds the template mat-select to the control using [formControl].
Web app initialization and alert handling src/app/web-app.component.ts	WebAppComponent reads settingsService.fontFamily during ngOnInit and applies it to document.body.style.fontFamily. When a 'Settings Update' alert is received, the component re-reads and reapplies the saved font preference.
Google Fonts stylesheet src/index.html	Index HTML includes a new Google Fonts stylesheet link for Inter, Montserrat, Open Sans, and Outfit font families with specified weight variants.

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: implementing a default font customization setting feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[IOhacker]

which browsers and OS platforms where used for the testing?

[RiteshGite]

@IOhacker

Tested on:

• Google Chrome (Windows 11)
• Brave Browser (Windows 11)