feat: add font style setting (#3092)

(cherry picked from commit b12412a3c1)

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 
 import {
   type AppSetting,
+  fontStyleOptions,
   useAppSetting,
   windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
@@ -48,6 +49,46 @@ export const ThemeSettings = () => {
   );
 };
 
+const FontFamilySettings = () => {
+  const [appSettings, setAppSettings] = useAppSetting();
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      defaultValue={appSettings.fontStyle}
+      onValueChange={useCallback(
+        (key: AppSetting['fontStyle']) => {
+          const value = fontStyleOptions.find(option => option.key === key)
+            ?.value;
+
+          setAppSettings({ fontStyle: key });
+
+          document
+            .querySelector('html')
+            ?.style.setProperty('--affine-font-family', value || null);
+        },
+        [setAppSettings]
+      )}
+    >
+      {fontStyleOptions.map(({ key, value }) => {
+        return (
+          <RadioButton
+            key={key}
+            bold={true}
+            value={key}
+            data-testid="system-font-style-trigger"
+            style={{
+              fontFamily: value,
+            }}
+          >
+            {key}
+          </RadioButton>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+};
+
 export const AppearanceSettings = () => {
   const t = useAFFiNEI18N();
 
@@ -72,6 +113,12 @@ export const AppearanceSettings = () => {
         >
           <ThemeSettings />
         </SettingRow>
+        <SettingRow
+          name={t['Font Style']()}
+          desc={t['Choose your font style']()}
+        >
+          <FontFamilySettings />
+        </SettingRow>
         <SettingRow
           name={t['Display Language']()}
           desc={t['Select the language for the interface.']()}