fix: google fonts not found exceptation (#5255)

frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy/util/google_font_family_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
@@ -106,7 +107,7 @@ class _FontSelectorState extends State<FontSelector> {
 
         final fontFamilyName = availableFonts[index - 1];
         final fontFamily = fontFamilyName != builtInFontFamily()
-            ? GoogleFonts.getFont(fontFamilyName).fontFamily
+            ? getGoogleFontSafely(fontFamilyName).fontFamily
             : TextStyle(fontFamily: builtInFontFamily()).fontFamily;
         return FlowyOptionTile.checkbox(
           // display the default font name if the font family name is empty

frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_setting.dart

@@ -28,7 +28,6 @@ class FontSetting extends StatelessWidget {
         children: [
           FlowyText(
             selectedFont,
-            // fontFamily:  GoogleFonts.getFont(selectedFont).fontFamily,
             color: theme.colorScheme.onSurface,
           ),
           const Icon(Icons.chevron_right),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart

@@ -9,6 +9,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/docu
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
 import 'package:appflowy/shared/flowy_gradient_colors.dart';
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -20,7 +21,6 @@ import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 double kDocumentCoverHeight = 98.0;
 double kDocumentTitlePadding = 20.0;
@@ -131,7 +131,7 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
     final documentFontFamily =
         context.read<DocumentPageStyleBloc>().state.fontFamily;
     if (documentFontFamily != null && fontFamily != documentFontFamily) {
-      fontFamily = GoogleFonts.getFont(documentFontFamily).fontFamily;
+      fontFamily = getGoogleFontSafely(documentFontFamily).fontFamily;
     }
     return TextField(
       controller: textEditingController,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart

@@ -4,11 +4,11 @@ import 'package:appflowy/mobile/presentation/setting/font/font_picker_screen.dar
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy/util/google_font_family_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:provider/provider.dart';
 
 class FontFamilyItem extends StatelessWidget {
@@ -70,7 +70,7 @@ class FontFamilyItem extends StatelessWidget {
           if (newFont != null && selection.isCollapsed) {
             editorState.updateToggledStyle(
               AppFlowyRichTextKeys.fontFamily,
-              GoogleFonts.getFont(newFont).fontFamily,
+              getGoogleFontSafely(newFont).fontFamily,
             );
           }
         });

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -1,8 +1,5 @@
 import 'dart:math';
 
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
@@ -10,12 +7,15 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/me
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/utils.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart';
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy/util/google_font_family_extension.dart';
 import 'package:appflowy/workspace/application/appearance_defaults.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:collection/collection.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -217,7 +217,7 @@ class EditorStyleCustomizer {
       return TextStyle(fontWeight: fontWeight);
     }
     try {
-      return GoogleFonts.getFont(fontFamily, fontWeight: fontWeight);
+      return getGoogleFontSafely(fontFamily, fontWeight: fontWeight);
     } on Exception {
       if ([builtInFontFamily(), builtInCodeFontFamily].contains(fontFamily)) {
         return TextStyle(fontFamily: fontFamily, fontWeight: fontWeight);
@@ -244,12 +244,12 @@ class EditorStyleCustomizer {
     if (attributes.fontFamily != null) {
       try {
         if (before.text?.contains('_regular') == true) {
-          GoogleFonts.getFont(attributes.fontFamily!.parseFontFamilyName());
+          getGoogleFontSafely(attributes.fontFamily!.parseFontFamilyName());
         } else {
           return TextSpan(
             text: before.text,
             style: after.style?.merge(
-              GoogleFonts.getFont(attributes.fontFamily!),
+              getGoogleFontSafely(attributes.fontFamily!),
             ),
           );
         }

frontend/appflowy_flutter/lib/shared/google_fonts_extension.dart

@@ -0,0 +1,37 @@
+import 'package:appflowy_backend/log.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+// if the font family is not available, google fonts packages will throw an exception
+// this method will return the system font family if the font family is not available
+TextStyle getGoogleFontSafely(
+  String fontFamily, {
+  FontWeight? fontWeight,
+  double? fontSize,
+  Color? fontColor,
+  double? letterSpacing,
+  double? lineHeight,
+}) {
+  try {
+    return GoogleFonts.getFont(
+      fontFamily,
+      fontWeight: fontWeight,
+      fontSize: fontSize,
+      color: fontColor,
+      letterSpacing: letterSpacing,
+      height: lineHeight,
+    );
+  } catch (e) {
+    Log.error(
+      'Font family $fontFamily is not available, using default font family instead',
+    );
+  }
+
+  return TextStyle(
+    fontWeight: fontWeight,
+    fontSize: fontSize,
+    color: fontColor,
+    letterSpacing: letterSpacing,
+    height: lineHeight,
+  );
+}

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/base_appearance.dart

@@ -1,10 +1,10 @@
 import 'dart:io';
 
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 String builtInFontFamily() {
   if (PlatformExtension.isDesktopOrWeb) {
@@ -63,13 +63,13 @@ abstract class BaseAppearance {
     }
 
     try {
-      return GoogleFonts.getFont(
+      return getGoogleFontSafely(
         fontFamily,
         fontSize: fontSize,
-        color: fontColor,
+        fontColor: fontColor,
         fontWeight: fontWeight,
         letterSpacing: letterSpacing,
-        height: lineHeight,
+        lineHeight: lineHeight,
       );
     } catch (e) {
       return textStyle;

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
+import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy/util/google_font_family_extension.dart';
 import 'package:appflowy/workspace/application/appearance_defaults.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
@@ -148,7 +149,7 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
                 return SliverFixedExtentList.builder(
                   itemBuilder: (context, index) => _fontFamilyItemButton(
                     context,
-                    GoogleFonts.getFont(displayed[index]),
+                    getGoogleFontSafely(displayed[index]),
                   ),
                   itemCount: displayed.length,
                   itemExtent: 32,