✨ Custom fonts

assets/translations/en-US.json

@@ -203,6 +203,11 @@
     "other": "{} comments"
   },
   "settingsAppearance": "Appearance",
+  "settingsCustomFonts": "Custom Fonts",
+  "settingsCustomFontsDescription": "Set custom fonts for the application.",
+  "settingsCustomFontFamily": "Custom Font Family",
+  "settingsCustomFontFamilyHint": "Use comma to separate fonts, higher priority comes first",
+  "settingsCustomFontApplied": "Custom font has been applied.",
   "settingsDisplayLanguage": "Display Language",
   "settingsDisplayLanguageDescription": "Set the application language.",
   "settingsDisplayLanguageSystem": "Follow System",

assets/translations/zh-CN.json

@@ -201,6 +201,11 @@
     "other": "{} 条评论"
   },
   "settingsAppearance": "外观",
+  "settingsCustomFonts": "自定义字体",
+  "settingsCustomFontsDescription": "设置应用程序使用的字体。",
+  "settingsCustomFontFamily": "应用字体",
+  "settingsCustomFontFamilyHint": "使用英文逗号分割每一种字体，越前优先级越高",
+  "settingsCustomFontApplied": "自定义字体已经应用。",
   "settingsDisplayLanguage": "显示语言",
   "settingsDisplayLanguageDescription": "设置应用程序使用的语言",
   "settingsDisplayLanguageSystem": "跟随系统",

assets/translations/zh-HK.json

@@ -201,6 +201,11 @@
     "other": "{} 條評論"
   },
   "settingsAppearance": "外觀",
+  "settingsCustomFonts": "自定義字體",
+  "settingsCustomFontsDescription": "設置應用程序使用的字體。",
+  "settingsCustomFontFamily": "應用字體",
+  "settingsCustomFontFamilyHint": "使用英文逗號分割每一種字體，越前優先級越高",
+  "settingsCustomFontApplied": "自定義字體已經應用。",
   "settingsDisplayLanguage": "顯示語言",
   "settingsDisplayLanguageDescription": "設置應用程序使用的語言",
   "settingsDisplayLanguageSystem": "跟隨系統",

assets/translations/zh-TW.json

@@ -201,6 +201,11 @@
     "other": "{} 條評論"
   },
   "settingsAppearance": "外觀",
+  "settingsCustomFonts": "自定義字體",
+  "settingsCustomFontsDescription": "設置應用程序使用的字體。",
+  "settingsCustomFontFamily": "應用字體",
+  "settingsCustomFontFamilyHint": "使用英文逗號分割每一種字體，越前優先級越高",
+  "settingsCustomFontApplied": "自定義字體已經應用。",
   "settingsDisplayLanguage": "顯示語言",
   "settingsDisplayLanguageDescription": "設置應用程序使用的語言",
   "settingsDisplayLanguageSystem": "跟隨系統",

lib/providers/config.dart

@@ -18,6 +18,7 @@ const kAppNotifyWithHaptic = 'app_notify_with_haptic';
 const kAppExpandPostLink = 'app_expand_post_link';
 const kAppExpandChatLink = 'app_expand_chat_link';
 const kAppRealmCompactView = 'app_realm_compact_view';
+const kAppCustomFonts = 'app_custom_fonts';
 
 const Map<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,

lib/providers/theme.dart

@@ -13,8 +13,16 @@ class ThemeProvider extends ChangeNotifier {
     });
   }
 
-  void reloadTheme({Color? seedColorOverride, bool? useMaterial3}) {
+  void reloadTheme({
-    createAppThemeSet(seedColorOverride: seedColorOverride, useMaterial3: useMaterial3).then((value) {
+    Color? seedColorOverride,
+    bool? useMaterial3,
+    String? customFonts,
+  }) {
+    createAppThemeSet(
+      seedColorOverride: seedColorOverride,
+      useMaterial3: useMaterial3,
+      customFonts: customFonts,
+    ).then((value) {
       theme = value;
       notifyListeners();
     });

lib/screens/settings.dart

@@ -48,6 +48,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
   late final SharedPreferences _prefs;
   String _docBasepath = '/';
 
+  final TextEditingController _customFontController = TextEditingController();
   final TextEditingController _serverUrlController = TextEditingController();
 
   @override
@@ -62,11 +63,15 @@ class _SettingsScreenState extends State<SettingsScreen> {
     final config = context.read<ConfigProvider>();
     _prefs = config.prefs;
     _serverUrlController.text = config.serverUrl;
+    if (_prefs.getString(kAppCustomFonts) != null) {
+      _customFontController.text = _prefs.getString(kAppCustomFonts) ?? '';
+    }
   }
 
   @override
   void dispose() {
     _serverUrlController.dispose();
+    _customFontController.dispose();
     super.dispose();
   }
 
@@ -330,6 +335,47 @@ class _SettingsScreenState extends State<SettingsScreen> {
                     setState(() {});
                   },
                 ),
+                ListTile(
+                  leading: const Icon(Symbols.font_download),
+                  title: Text('settingsCustomFonts').tr(),
+                  subtitle: Text('settingsCustomFontsDescription').tr(),
+                  contentPadding: const EdgeInsets.only(left: 24, right: 14),
+                  trailing: IconButton(
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(),
+                    icon: const Icon(Icons.clear),
+                    onPressed: () {
+                      _prefs.remove(kAppCustomFonts);
+                      context.showSnackbar('settingsCustomFontApplied'.tr());
+                      final theme = context.read<ThemeProvider>();
+                      _customFontController.clear();
+                      theme.reloadTheme();
+                    },
+                  ),
+                ),
+                TextField(
+                  controller: _customFontController,
+                  decoration: InputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: 'settingsCustomFontFamily'.tr(),
+                    helperText: 'settingsCustomFontFamilyHint'.tr(),
+                    prefixIcon: const Icon(Symbols.format_paint),
+                    suffixIcon: IconButton(
+                      icon: const Icon(Symbols.save),
+                      onPressed: () {
+                        _prefs.setString(
+                          kAppCustomFonts,
+                          _customFontController.text,
+                        );
+                        context.showSnackbar('settingsCustomFontApplied'.tr());
+                        final theme = context.read<ThemeProvider>();
+                        theme.reloadTheme();
+                      },
+                    ),
+                  ),
+                  onTapOutside: (_) =>
+                      FocusManager.instance.primaryFocus?.unfocus(),
+                ).padding(horizontal: 16, top: 8, bottom: 4),
               ],
             ),
             Column(

lib/theme.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:surface/providers/config.dart';
 
@@ -13,10 +12,18 @@ class ThemeSet {
 }
 
 Future<ThemeSet> createAppThemeSet(
-    {Color? seedColorOverride, bool? useMaterial3}) async {
+    {Color? seedColorOverride, bool? useMaterial3, String? customFonts}) async {
   return ThemeSet(
-    light: await createAppTheme(Brightness.light, useMaterial3: useMaterial3),
+    light: await createAppTheme(
-    dark: await createAppTheme(Brightness.dark, useMaterial3: useMaterial3),
+      Brightness.light,
+      useMaterial3: useMaterial3,
+      customFonts: customFonts,
+    ),
+    dark: await createAppTheme(
+      Brightness.dark,
+      useMaterial3: useMaterial3,
+      customFonts: customFonts,
+    ),
   );
 }
 
@@ -24,6 +31,7 @@ Future<ThemeData> createAppTheme(
   Brightness brightness, {
   Color? seedColorOverride,
   bool? useMaterial3,
+  String? customFonts,
 }) async {
   final prefs = await SharedPreferences.getInstance();
 
@@ -41,11 +49,17 @@ Future<ThemeData> createAppTheme(
   final useM3 =
       useMaterial3 ?? (prefs.getBool(kMaterialYouToggleStoreKey) ?? true);
 
+  final inUseFonts = (customFonts ?? prefs.getString(kAppCustomFonts))
+      ?.split(',')
+      .map((ele) => ele.trim())
+      .toList();
+
   return ThemeData(
     useMaterial3: useM3,
     colorScheme: colorScheme,
     brightness: brightness,
-    // textTheme: GoogleFonts.rubikTextTheme(),
+    fontFamily: inUseFonts?.firstOrNull,
+    fontFamilyFallback: inUseFonts?.sublist(1),
     iconTheme: IconThemeData(
       fill: 0,
       weight: 400,