From 4a81658f60226617dc6b8cf85d86e6c603885799 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sun, 3 May 2026 14:43:06 +0700
Subject: [PATCH] Bugfix/improve typography for client app and charts (#6833)

* Improve typography for client app and charts

* Update changelog
---
 CHANGELOG.md                         |  4 ++++
 apps/client/src/app/app.component.ts |  4 ++++
 apps/client/src/styles/theme.scss    | 22 +++++++++++++++-------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 045f92c2c..e0b601427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Harmonized the unit styling in the value component
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
+### Fixed
+
+- Resolved an issue where charts and components defaulted to _Roboto_ instead of the preconfigured _Inter_ font family
+
 ## 3.1.0 - 2026-04-29
 
 ### Added
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 0a9be3a75..e1967970d 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -28,6 +28,7 @@ import {
   RouterOutlet
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
+import { Chart } from 'chart.js';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -255,6 +256,9 @@ export class GfAppComponent implements OnInit {
 
     this.toggleTheme(isDarkTheme);
 
+    // Default chart styles
+    Chart.defaults.font.family = getCssVariable('--font-family-sans-serif');
+
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
         this.toggleTheme(event.matches);
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index dfde47c77..296270e7f 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -139,20 +139,28 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 @include mat.elevation-classes();
 @include mat.table-density(-1);
 
-// $gf-typography: mat.m2-define-typography-config();
+$gf-typography: (
+  // Font families
+  brand-family: var(--font-family-sans-serif),
+  plain-family: var(--font-family-sans-serif),
+  // Font weights
+  bold-weight: 700,
+  medium-weight: 500,
+  regular-weight: 400
+);
 
 .theme-light {
   $gf-theme-default: mat.define-theme(
     (
       color: (
         primary: $_primary,
-        theme-type: light,
-        tertiary: $_tertiary
+        tertiary: $_tertiary,
+        theme-type: light
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );
 
@@ -229,13 +237,13 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     (
       color: (
         primary: $_primary,
-        theme-type: dark,
-        tertiary: $_tertiary
+        tertiary: $_tertiary,
+        theme-type: dark
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );