feat: Add custom font setting

src/app/features/settings/general/General.tsx

@@ -303,6 +303,29 @@ function PageZoomInput() {
   );
 }
 
+function CustomFontInput() {
+  const [customFont, setCustomFont] = useSetting(settingsAtom, 'customFont');
+  const [currentFont, setCurrentFont] = useState(`${customFont}`);
+
+  const handleFontChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    setCurrentFont(evt.target.value);
+  };
+
+  const handleFontEnter: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('escape', evt)) {
+      evt.stopPropagation();
+      setCurrentFont(customFont);
+    }
+    if (
+      isKeyHotkey('enter', evt) &&
+      'value' in evt.target &&
+      typeof evt.target.value === 'string'
+    ) {
+      setCustomFont(evt.target.value);
+      setCurrentFont(evt.target.value);
+    }
+  };
+
 function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
   const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
@@ -350,6 +373,10 @@ function Appearance() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile title="Page Zoom" after={<PageZoomInput />} />
       </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile title="Custom Font" after={<CustomFontInput />} />
+      </SequenceCard>
     </Box>
   );
 }

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -51,6 +51,14 @@ function PageZoomFeature() {
   return null;
 }
 
+function CustomFontFeature() {
+  const [customFont] = useSetting(settingsAtom, 'customFont');
+
+  document.documentElement.style.setProperty('--custom-font', `${customFont}`);
+
+  return null;
+}
+
 function FaviconUpdater() {
   const roomToUnread = useAtomValue(roomToUnreadAtom);
 
@@ -100,7 +108,7 @@ function InviteNotifications() {
         noti.close();
       };
     },
-    [navigate]
+    [navigate],
   );
 
   const playSound = useCallback(() => {
@@ -169,7 +177,7 @@ function MessageNotifications() {
       notifRef.current?.close();
       notifRef.current = noti;
     },
-    [navigate]
+    [navigate],
   );
 
   const playSound = useCallback(() => {
@@ -183,7 +191,7 @@ function MessageNotifications() {
       room,
       toStartOfTimeline,
       removed,
-      data
+      data,
     ) => {
       if (mx.getSyncState() !== 'SYNCING') return;
       if (document.hasFocus() && (selectedRoomId === room?.roomId || notificationSelected)) return;
@@ -218,7 +226,7 @@ function MessageNotifications() {
         notify({
           roomName: room.name ?? 'Unknown',
           roomAvatar: avatarMxc
-            ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+            ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
             : undefined,
           username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
           roomId: room.roomId,
@@ -262,6 +270,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
     <>
       <SystemEmojiFeature />
       <PageZoomFeature />
+      <CustomFontFeature />
       <FaviconUpdater />
       <InviteNotifications />
       <MessageNotifications />

src/app/state/settings.ts

@@ -25,6 +25,7 @@ export interface Settings {
   editorToolbar: boolean;
   twitterEmoji: boolean;
   pageZoom: number;
+  customFont: string;
   hideActivity: boolean;
 
   isPeopleDrawer: boolean;
@@ -59,6 +60,7 @@ const defaultSettings: Settings = {
   editorToolbar: false,
   twitterEmoji: false,
   pageZoom: 100,
+  customFont: 'InterVariable',
   hideActivity: false,
 
   isPeopleDrawer: true,
@@ -102,5 +104,5 @@ export const settingsAtom = atom<Settings, [Settings], undefined>(
   (get, set, update) => {
     set(baseSettings, update);
     setSettings(update);
-  }
+  },
 );

src/index.css

@@ -1,6 +1,7 @@
 @font-face {
   font-family: Twemoji;
-  src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
+  src:
+    url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
     url('../public/font/Twemoji.Mozilla.v15.1.0.ttf');
   font-display: swap;
 }
@@ -19,7 +20,8 @@
   --mx-uc-8: hsl(94, 100%, 35%);
 
   --font-emoji: 'Twemoji_DISABLED';
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+  --custom-font: 'InterVariable';
+  --font-secondary: var(--custom-font), 'InterVariable', var(--font-emoji), sans-serif;
 }
 
 .dark-theme,
@@ -35,7 +37,7 @@
   --mx-uc-7: hsl(243, 100%, 80%);
   --mx-uc-8: hsl(94, 100%, 80%);
 
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+  --font-secondary: var(--custom-font), 'InterVariable', var(--font-emoji), sans-serif;
 }
 
 html {