TF-3933 Avoid load font from google

Signed-off-by: dab246 <tdvu@linagora.com>

core/lib/presentation/constants/constants_ui.dart

@@ -1,5 +1,27 @@
+import 'package:core/utils/platform_info.dart';
+
 class ConstantsUI {
   static const String fontApp = 'Inter';
+  static final List<String>? fontFamilyFallback = PlatformInfo.isMobile
+      ? null
+      : webFontFamilyFallback;
+
+  static const List<String> webFontFamilyFallback = [
+    'Roboto', // Default Flutter font – Latin, Cyrillic, Diacritics
+    'NotoSans', // Latin, Cyrillic – supports European languages
+    'NotoSansArabic', // Arabic script
+    'NotoSansTamil', // Tamil script
+    'NotoSansThai', // Thai script
+    'NotoSansKR', // Korean
+    'NotoSansSC', // Simplified Chinese (zh_Hans)
+    'NotoSansMath', // Math symbols (∑, ∫, √, etc.)
+    'NotoSansEgyptianHieroglyphs', // Egyptian Hieroglyphs (𓀀)
+    'NotoEmoji', // Monochrome emoji
+    'NotoSansSymbols', // Miscellaneous symbols and arrows
+    'NotoSansSymbols2', // Extended symbol support
+    'sans-serif', // Generic fallback for any platform
+  ];
+
   static const double htmlContentMaxHeight = 22000.0;
   static const double composerHtmlContentMaxHeight = 20000.0;
   static const double htmlContentMinWidth = 300;

core/lib/presentation/utils/theme_utils.dart

@@ -10,6 +10,7 @@ class ThemeUtils {
     return ThemeData(
       scaffoldBackgroundColor: Colors.white,
       fontFamily: ConstantsUI.fontApp,
+      fontFamilyFallback: ConstantsUI.fontFamilyFallback,
       appBarTheme: _appBarTheme,
       textTheme: _textTheme,
       hoverColor: Theme.of(context).colorScheme.outline.withValues(alpha: 0.08),
@@ -23,97 +24,80 @@ class ThemeUtils {
     );
   }
 
-  static TextTheme get _textTheme {
-    return const TextTheme(
-      bodyLarge: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: -0.15,
-        fontSize: 17,
-        height: 24 / 17,
-      ),
-      bodyMedium: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.25,
-      ),
-      bodySmall: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w400,
-        letterSpacing: 0.0,
-        fontSize: 13,
-        height: 16 / 13
-      ),
-      labelLarge: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.1,
-      ),
-      labelSmall: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.5,
-      ),
-      displayLarge: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w700,
-      ),
-      displayMedium: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.4,
-      ),
-      displaySmall: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.4,
-      ),
-      headlineMedium: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-      ),
-      headlineSmall: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-        fontSize: 24,
-        height: 32 / 24,
-        letterSpacing: 0.0,
-      ),
-      headlineLarge: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-        fontSize: 32,
-      ),
-      titleLarge: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.0,
-        fontSize: 22,
-        height: 28 / 22,
-      ),
-      titleMedium: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.15,
-        fontSize: 16,
-        height: 24 / 16,
-      ),
-      titleSmall: TextStyle(
-        fontFamily: ConstantsUI.fontApp,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.1,
-        fontSize: 14,
-        height: 20 / 14,
-      ),
-    );
-  }
+  static const TextTheme _textTheme = TextTheme(
+    bodyLarge: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: -0.15,
+      fontSize: 17,
+      height: 24 / 17,
+    ),
+    bodyMedium: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.25,
+    ),
+    bodySmall: TextStyle(
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0.0,
+      fontSize: 13,
+      height: 16 / 13
+    ),
+    labelLarge: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.1,
+    ),
+    labelSmall: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.5,
+    ),
+    displayLarge: TextStyle(
+      fontWeight: FontWeight.w700,
+    ),
+    displayMedium: TextStyle(
+      fontWeight: FontWeight.w600,
+      letterSpacing: 0.4,
+    ),
+    displaySmall: TextStyle(
+      fontWeight: FontWeight.w600,
+      letterSpacing: 0.4,
+    ),
+    headlineMedium: TextStyle(
+      fontWeight: FontWeight.w600,
+    ),
+    headlineSmall: TextStyle(
+      fontWeight: FontWeight.w600,
+      fontSize: 24,
+      height: 32 / 24,
+      letterSpacing: 0.0,
+    ),
+    headlineLarge: TextStyle(
+      fontWeight: FontWeight.w600,
+      fontSize: 32,
+    ),
+    titleLarge: TextStyle(
+      fontWeight: FontWeight.w600,
+      letterSpacing: 0.0,
+      fontSize: 22,
+      height: 28 / 22,
+    ),
+    titleMedium: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.15,
+      fontSize: 16,
+      height: 24 / 16,
+    ),
+    titleSmall: TextStyle(
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.1,
+      fontSize: 14,
+      height: 20 / 14,
+    ),
+  );
 
   static TextStyle textStyleBodyBody1({
     Color? color,
     FontWeight? fontWeight,
     double? fontSize,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w500,
     letterSpacing: 0.0,
     fontSize: fontSize ?? 16,
@@ -125,8 +109,7 @@ class ThemeUtils {
     Color? color,
     Color? backgroundColor,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w400,
     letterSpacing: 0.0,
     fontSize: 15,
@@ -138,8 +121,7 @@ class ThemeUtils {
   static TextStyle textStyleBodyBody3({
     Color? color,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w400,
     letterSpacing: 0.0,
     fontSize: 14,
@@ -151,8 +133,7 @@ class ThemeUtils {
     Color? color,
     Color? backgroundColor,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w600,
     letterSpacing: 0.0,
     fontSize: 15,
@@ -164,8 +145,7 @@ class ThemeUtils {
   static TextStyle textStyleHeadingH6({
     Color? color,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w700,
     letterSpacing: 0.0,
     fontSize: 20,
@@ -176,8 +156,7 @@ class ThemeUtils {
   static TextStyle textStyleHeadingH5({
     Color? color,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w500,
     letterSpacing: 0.0,
     fontSize: 24,
@@ -188,8 +167,7 @@ class ThemeUtils {
   static TextStyle textStyleHeadingH4({
     Color? color,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w500,
     letterSpacing: 0.0,
     fontSize: 32,
@@ -200,8 +178,7 @@ class ThemeUtils {
   static TextStyle textStyleHeadingHeadingSmall({
     Color? color,
     FontWeight? fontWeight,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: fontWeight ?? FontWeight.w500,
     letterSpacing: 0.0,
     fontSize: 17,
@@ -209,8 +186,7 @@ class ThemeUtils {
     color: color,
   );
 
-  static const textStyleM3HeadlineSmall = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleM3HeadlineSmall = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w600,
     letterSpacing: 0.0,
     fontSize: 24,
@@ -221,8 +197,7 @@ class ThemeUtils {
   static TextStyle textStyleInter700({
     Color? color,
     double? fontSize,
-  }) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  }) => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w700,
     letterSpacing: 0.0,
     fontSize: fontSize ?? 15,
@@ -230,8 +205,7 @@ class ThemeUtils {
     color: color ?? Colors.black,
   );
 
-  static TextStyle textStyleInter500() => const TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleInter500() => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: 0.0,
     fontSize: 14,
@@ -239,8 +213,7 @@ class ThemeUtils {
     color: Colors.black,
   );
 
-  static const TextStyle textStyleInter400 = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static final TextStyle textStyleInter400 = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.normal,
     letterSpacing: -0.13,
     fontSize: 13,
@@ -248,8 +221,7 @@ class ThemeUtils {
     color: Colors.black,
   );
 
-  static TextStyle textStyleM3LabelLarge({Color? color}) => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleM3LabelLarge({Color? color}) => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: 0.1,
     fontSize: 14,
@@ -257,8 +229,7 @@ class ThemeUtils {
     color: color ?? AppColor.primaryMain,
   );
 
-  static TextStyle get textStyleM3LabelSmall => const TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle get textStyleM3LabelSmall => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: 0.5,
     fontSize: 11,
@@ -266,8 +237,7 @@ class ThemeUtils {
     color: AppColor.m3Tertiary,
   );
 
-  static TextStyle get textStyleM3TitleSmall => const TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle get textStyleM3TitleSmall => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: 0.1,
     fontSize: 14,
@@ -275,8 +245,7 @@ class ThemeUtils {
     color: AppColor.m3Tertiary20,
   );
 
-  static const TextStyle textStyleM3BodyMedium1 = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleM3BodyMedium1 = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w400,
     letterSpacing: -0.15,
     fontSize: 16,
@@ -284,8 +253,7 @@ class ThemeUtils {
     color: AppColor.textPrimary,
   );
 
-  static const TextStyle textStyleM3BodyMedium3 = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleM3BodyMedium3 = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w400,
     letterSpacing: 0.25,
     fontSize: 14,
@@ -293,8 +261,7 @@ class ThemeUtils {
     color: AppColor.m3SurfaceBackground,
   );
 
-  static final TextStyle textStyleM3BodyMedium = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static final TextStyle textStyleM3BodyMedium = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: 0.25,
     fontSize: 14,
@@ -302,8 +269,7 @@ class ThemeUtils {
     color: AppColor.textSecondary.withValues(alpha: 0.48),
   );
 
-  static const TextStyle textStyleM3BodyLarge = TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleM3BodyLarge = defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w500,
     letterSpacing: -0.15,
     fontSize: 17,
@@ -311,8 +277,7 @@ class ThemeUtils {
     color: AppColor.m3SurfaceBackground,
   );
 
-  static TextStyle textStyleAppShortcut() => const TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleAppShortcut() => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.normal,
     letterSpacing: 0.0,
     fontSize: 12,
@@ -320,8 +285,7 @@ class ThemeUtils {
     color: AppColor.textPrimary,
   );
 
-  static TextStyle textStyleContentCaption() => const TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleContentCaption() => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.normal,
     letterSpacing: 0,
     fontSize: 11,
@@ -329,8 +293,7 @@ class ThemeUtils {
     color: AppColor.steelGray400,
   );
 
-  static TextStyle textStyleInter600() => TextStyle(
-    fontFamily: ConstantsUI.fontApp,
+  static TextStyle textStyleInter600() => defaultTextStyleInterFont.copyWith(
     fontWeight: FontWeight.w600,
     letterSpacing: 0.0,
     fontSize: 24,
@@ -338,8 +301,9 @@ class ThemeUtils {
     color: AppColor.gray424244.withValues(alpha: 0.9),
   );
 
-  static const TextStyle defaultTextStyleInterFont = TextStyle(
+  static TextStyle defaultTextStyleInterFont = TextStyle(
     fontFamily: ConstantsUI.fontApp,
+    fontFamilyFallback: ConstantsUI.fontFamilyFallback,
   );
 
   static TextSelectionThemeData get _textSelectionTheme {
@@ -350,26 +314,22 @@ class ThemeUtils {
     );
   }
 
-  static AppBarTheme get _appBarTheme {
-    return AppBarTheme(
-      color: Colors.white,
-      elevation: 0,
-      systemOverlayStyle: SystemUiOverlayStyle.light,
-      iconTheme: const IconThemeData(color: Colors.black),
-      titleTextStyle: defaultTextStyleInterFont.copyWith(
-        color: const Color(0XFF8B8B8B),
-        fontSize: 18,
-      ),
-      toolbarTextStyle: defaultTextStyleInterFont,
-    );
-  }
+  static final AppBarTheme _appBarTheme = AppBarTheme(
+    color: Colors.white,
+    elevation: 0,
+    systemOverlayStyle: SystemUiOverlayStyle.light,
+    iconTheme: const IconThemeData(color: Colors.black),
+    titleTextStyle: defaultTextStyleInterFont.copyWith(
+      color: const Color(0XFF8B8B8B),
+      fontSize: 18,
+    ),
+    toolbarTextStyle: defaultTextStyleInterFont,
+  );
 
-  static DividerThemeData get _dividerTheme {
-    return const DividerThemeData(
-      color: AppColor.colorDivider,
-      space: 0
-    );
-  }
+  static const DividerThemeData _dividerTheme = DividerThemeData(
+    color: AppColor.colorDivider,
+    space: 0
+  );
 
   static void setSystemLightUIStyle() {
     SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(

core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart

@@ -22,7 +22,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
   final double heightContent;
   final TextDirection? direction;
   final double? contentPadding;
-  final bool useDefaultFont;
+  final bool useDefaultFontStyle;
 
   /// Handler for mailto: links
   final OnMailtoClicked? mailtoDelegate;
@@ -49,7 +49,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
     required this.widthContent,
     this.heightContent = 200,
     this.allowResizeToDocumentSize = true,
-    this.useDefaultFont = false,
+    this.useDefaultFontStyle = false,
     this.mailtoDelegate,
     this.direction,
     this.onClickHyperLinkAction,
@@ -360,7 +360,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
       javaScripts: combinedScripts,
       direction: widget.direction,
       contentPadding: widget.contentPadding,
-      useDefaultFont: widget.useDefaultFont,
+      useDefaultFontStyle: widget.useDefaultFontStyle,
     );
 
     return htmlTemplate;

core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart

@@ -29,7 +29,7 @@ class HtmlContentViewer extends StatefulWidget {
   final TextDirection? direction;
   final bool keepWidthWhileLoading;
   final double? contentPadding;
-  final bool useDefaultFont;
+  final bool useDefaultFontStyle;
   final double? maxHtmlContentHeight;
   final double htmlContentMinHeight;
   final double offsetHtmlContentHeight;
@@ -56,7 +56,7 @@ class HtmlContentViewer extends StatefulWidget {
     this.enableQuoteToggle = false,
     this.keepWidthWhileLoading = false,
     this.contentPadding,
-    this.useDefaultFont = false,
+    this.useDefaultFontStyle = false,
     this.disableScrolling = false,
     this.maxViewHeight,
     this.maxHtmlContentHeight,
@@ -150,7 +150,7 @@ class HtmlContentViewState extends State<HtmlContentViewer> with AutomaticKeepAl
       javaScripts: combinedScripts,
       styleCSS: combinedCss,
       contentPadding: widget.contentPadding,
-      useDefaultFont: widget.useDefaultFont,
+      useDefaultFontStyle: widget.useDefaultFontStyle,
     );
   }
 

core/lib/presentation/views/html_viewer/ios_html_content_viewer_widget.dart

@@ -15,7 +15,7 @@ class IosHtmlContentViewerWidget extends StatefulWidget {
 
   final String contentHtml;
   final TextDirection? direction;
-  final bool useDefaultFont;
+  final bool useDefaultFontStyle;
   final OnMailtoDelegateAction? onMailtoDelegateAction;
   final OnPreviewEMLDelegateAction? onPreviewEMLDelegateAction;
   final OnDownloadAttachmentDelegateAction? onDownloadAttachmentDelegateAction;
@@ -24,7 +24,7 @@ class IosHtmlContentViewerWidget extends StatefulWidget {
     Key? key,
     required this.contentHtml,
     this.direction,
-    this.useDefaultFont = false,
+    this.useDefaultFontStyle = true,
     this.onMailtoDelegateAction,
     this.onPreviewEMLDelegateAction,
     this.onDownloadAttachmentDelegateAction,
@@ -53,7 +53,7 @@ class _IosHtmlContentViewerWidgetState extends State<IosHtmlContentViewerWidget>
       content: widget.contentHtml,
       direction: widget.direction,
       javaScripts: HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage,
-      useDefaultFont: widget.useDefaultFont,
+      useDefaultFontStyle: widget.useDefaultFontStyle,
     ));
   }
 

core/lib/utils/html/html_template.dart

@@ -1,6 +1,7 @@
 
+import 'package:flutter/material.dart';
+
 class HtmlTemplate {
-  static const String fontLink = '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">';
   static const String nameClassToolTip = 'tmail-tooltip';
   static const String tooltipLinkCss = '''
     .$nameClassToolTip .tooltiptext {
@@ -66,10 +67,54 @@ class HtmlTemplate {
      </style>
   ''';
 
+  static const String fontFaceStyle = '''
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Regular.ttf") format("truetype");
+      font-weight: 400;
+      font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Medium.ttf") format("truetype");
+      font-weight: 500;
+      font-style: medium;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-SemiBold.ttf") format("truetype");
+      font-weight: 600;
+      font-style: semi-bold;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Bold.ttf") format("truetype");
+      font-weight: 700;
+      font-style: bold;
+    }
+    
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+  ''';
+
+  static const String defaultFontStyle = '''
+    body {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: -0.01em; /* -1% */
+    }
+  ''';
+
   static const String previewEMLFileCssStyle = '''
     <style> 
+      $fontFaceStyle
+
       body {
-        font-family: Arial, 'Inter', sans-serif;
         color: #333;
         margin: 0;
         padding: 0;
@@ -219,38 +264,64 @@ class HtmlTemplate {
 
   static const String markDownAndASCIIArtStyleCSS = 'display: block; font-family: monospace; white-space: pre; margin: 1em 0px;';
 
-  static const String customInternalStyleCSS = '''
+  static String webCustomInternalStyleCSS({
+    bool useDefaultFontStyle = false,
+    bool customScrollbar = false,
+  }) => '''
     <style>
-      html, .note-editable, .note-codable {
-        overflow: auto;
-      }
+      ${HtmlTemplate.fontFaceStyle}
       
-      html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-
-      html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
-        background-color: #c1c1c1;
-        border-radius: 10px;
-        min-height: 70px;
-      }
+      ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
       
-     html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
-        background: transparent;
-        border-radius: 10px;
-      }
-      
-      /* Browsers without `::-webkit-scrollbar-*` support */
-      @supports not selector(::-webkit-scrollbar) {
-          html, .note-editable, .note-codable {
-            scrollbar-width: thin;
-            scrollbar-color: #c1c1c1 transparent;
-          }
-      }
+      ${customScrollbar ? '''
+        html, .note-editable, .note-codable {
+          overflow: auto;
+        }
+        
+        html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+  
+        html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
+          background-color: #c1c1c1;
+          border-radius: 10px;
+          min-height: 70px;
+        }
+        
+       html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 10px;
+        }
+        
+        /* Browsers without `::-webkit-scrollbar-*` support */
+        @supports not selector(::-webkit-scrollbar) {
+            html, .note-editable, .note-codable {
+              scrollbar-width: thin;
+              scrollbar-color: #c1c1c1 transparent;
+            }
+        }
+      ''' : ''}
     </style>
   ''';
 
+  static String mobileCustomInternalStyleCSS({
+    bool useDefaultFontStyle = false,
+    TextDirection direction = TextDirection.ltr,
+  }) => '''
+    ${HtmlTemplate.fontFaceStyle}
+  
+    ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
+      
+    #editor {
+      direction: ${direction.name};
+    }
+    
+    #editor .tmail-signature {
+      text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+    }
+  ''';
+
   static const String disableScrollingStyleCSS = '''
     html, body {
       overflow: hidden;

core/lib/utils/html/html_utils.dart

@@ -1,6 +1,7 @@
 import 'dart:convert';
 import 'dart:math';
 
+import 'package:core/utils/html/html_template.dart';
 import 'package:html_unescape/html_unescape.dart';
 
 import 'js_interop_stub.dart' if (dart.library.html) 'dart:js_interop';
@@ -9,7 +10,6 @@ import 'dart:typed_data';
 import 'package:core/data/constants/constant.dart';
 import 'package:core/presentation/extensions/html_extension.dart';
 import 'package:core/utils/app_logger.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:universal_html/html.dart' as html;
 
@@ -41,72 +41,43 @@ class HtmlUtils {
       editor.parentNode.replaceChild(newEditor, editor);''',
     name: 'unregisterDropListener');
 
-  static String customCssStyleHtmlEditor({
+  static String customInlineBodyCssStyleHtmlEditor({
     TextDirection direction = TextDirection.ltr,
-    bool useDefaultFont = false,
     double? horizontalPadding,
   }) {
-    if (PlatformInfo.isWeb) {
-      return '''
-        <style>
-          ${useDefaultFont ? '''
-            body {
-              font-family: Arial, 'Inter', sans-serif;
-              font-weight: 500;
-              font-size: 16px;
-              line-height: 24px;
-            }
-          ''' : ''}
+    return '''
+      <style>
+        .note-frame, .note-tooltip-content, .note-popover {
+          font-family: 'Inter', sans-serif;
+        }
         
-          .note-editable {
-            direction: ${direction.name};
-          }
-          
-          .note-editable .tmail-signature {
-            text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
-          }
-          
-          ${horizontalPadding != null
-            ? '''
-                .note-codable {
-                  padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
-                  margin-right: 3px;
-                }
-                
-                .note-editable {
-                  padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
-                  margin-right: 3px;
-                }
-              '''
-            : '''
+        .note-editable {
+          direction: ${direction.name};
+        }
+        
+        .note-editable .tmail-signature {
+          text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+        }
+        
+        ${horizontalPadding != null
+          ? '''
+              .note-codable {
+                padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
+                margin-right: 3px;
+              }
+              
+              .note-editable {
+                padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
+                margin-right: 3px;
+              }
+            '''
+          : '''
               .note-editable {
                 padding: 10px 10px 0px 10px;
               }
             '''}
-        </style>
-      ''';
-    } else if (PlatformInfo.isMobile) {
-      return '''
-        ${useDefaultFont ? '''
-          body {
-            font-family: Arial, 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-          }
-        ''' : ''}
-        
-        #editor {
-          direction: ${direction.name};
-        }
-        
-        #editor .tmail-signature {
-          text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
-        }
-      ''';
-    } else {
-      return '';
-    }
+      </style>
+    ''';
   }
 
   static String validateHtmlImageResourceMimeType(String mimeType) {
@@ -134,7 +105,7 @@ class HtmlUtils {
     String? styleCSS,
     String? javaScripts,
     bool hideScrollBar = true,
-    bool useDefaultFont = false,
+    bool useDefaultFontStyle = false,
     TextDirection? direction,
     double? contentPadding,
   }) {
@@ -144,18 +115,11 @@ class HtmlUtils {
       <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-      ${useDefaultFont && PlatformInfo.isMobile
-        ? '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">'
-        : ''}
       <style>
-        ${useDefaultFont ? '''
-          body {
-            font-family: 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-          }
-        ''' : ''}
+        ${HtmlTemplate.fontFaceStyle}
+        
+        ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
+        
         .tmail-content {
           min-height: ${minHeight ?? 0}px;
           min-width: ${minWidth ?? 0}px;

core/lib/utils/preview_eml_file_utils.dart

@@ -177,9 +177,6 @@ class PreviewEmlFileUtils {
       listAttachment: listAttachment,
     );
 
-    Element linkFontElement = Element.html(HtmlTemplate.fontLink);
-    document.head?.append(linkFontElement);
-
     Element styleElement = Element.html(HtmlTemplate.previewEMLFileCssStyle);
     document.head?.append(styleElement);
 

lib/features/composer/presentation/view/mobile/editor_fullscreen_dialog_view.dart

@@ -70,7 +70,6 @@ class EditorFullscreenDialogView extends StatelessWidget {
             Expanded(
               child: IosHtmlContentViewerWidget(
                 contentHtml: content,
-                useDefaultFont: true,
                 direction: AppUtils.getCurrentDirection(context),
               ),
             ),

lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart

@@ -1,6 +1,6 @@
 
 import 'package:core/presentation/constants/constants_ui.dart';
-import 'package:core/utils/html/html_utils.dart';
+import 'package:core/utils/html/html_template.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:rich_text_composer/rich_text_composer.dart';
@@ -34,9 +34,9 @@ class MobileEditorWidget extends StatelessWidget {
       maxHeight: PlatformInfo.isIOS ? ConstantsUI.composerHtmlContentMaxHeight : null,
       addDefaultSelectionMenuItems: false,
       initialContent: content,
-      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(
+      customStyleCss: HtmlTemplate.mobileCustomInternalStyleCSS(
         direction: direction,
-        useDefaultFont: true,
+        useDefaultFontStyle: true,
       ),
       onCreated: (editorApi) => onCreatedEditorAction.call(context, editorApi, content),
       onCompleted: onLoadCompletedEditorAction,

lib/features/composer/presentation/widgets/web/web_editor_widget.dart

@@ -121,11 +121,14 @@ class _WebEditorState extends State<WebEditorWidget> {
         darkMode: false,
         cacheHTMLAssetOffline: true,
         initialText: widget.content,
-        customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(
+        customBodyCssStyle: HtmlUtils.customInlineBodyCssStyleHtmlEditor(
           direction: widget.direction,
           horizontalPadding: widget.horizontalPadding,
         ),
-        customInternalCSS: HtmlTemplate.customInternalStyleCSS,
+        customInternalCSS: HtmlTemplate.webCustomInternalStyleCSS(
+          useDefaultFontStyle: true,
+          customScrollbar: true,
+        ),
         spellCheck: true,
         disableDragAndDrop: true,
         webInitialScripts: UnmodifiableListView([

lib/features/email/presentation/email_view.dart

@@ -357,7 +357,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                     mailtoDelegate: controller.openMailToLink,
                     direction: AppUtils.getCurrentDirection(context),
                     contentPadding: 0,
-                    useDefaultFont: true,
+                    useDefaultFontStyle: true,
                     scrollController: scrollController,
                     enableQuoteToggle: isInsideThreadDetailView,
                   ),
@@ -381,7 +381,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                             initialWidth: bodyConstraints.maxWidth,
                             direction: AppUtils.getCurrentDirection(context),
                             contentPadding: 0,
-                            useDefaultFont: true,
+                            useDefaultFontStyle: true,
                             maxHtmlContentHeight: ConstantsUI.htmlContentMaxHeight,
                             onMailtoDelegateAction: controller.openMailToLink,
                             onHtmlContentClippedAction: controller.onHtmlContentClippedAction,
@@ -421,7 +421,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                     initialWidth: bodyConstraints.maxWidth,
                     direction: AppUtils.getCurrentDirection(context),
                     contentPadding: 0,
-                    useDefaultFont: true,
+                    useDefaultFontStyle: true,
                     onMailtoDelegateAction: controller.openMailToLink,
                     keepAlive: isInsideThreadDetailView,
                     enableQuoteToggle: isInsideThreadDetailView,

lib/features/email/presentation/widgets/calendar_event/event_body_content_widget.dart

@@ -50,6 +50,7 @@ class EventBodyContentWidget extends StatelessWidget {
                 return HtmlContentViewerOnWeb(
                   widthContent: constraints.maxWidth,
                   contentHtml: content,
+                  useDefaultFontStyle: true,
                   mailtoDelegate: onMailtoDelegateAction,
                   direction: AppUtils.getCurrentDirection(context),
                   scrollController: scrollController,
@@ -64,6 +65,7 @@ class EventBodyContentWidget extends StatelessWidget {
                 maxHtmlContentHeight: PlatformInfo.isIOS
                   ? ConstantsUI.htmlContentMaxHeight
                   : null,
+                useDefaultFontStyle: true,
                 direction: AppUtils.getCurrentDirection(context),
                 onMailtoDelegateAction: onMailtoDelegateAction
               );

lib/features/email_previewer/email_previewer_dialog_view.dart

@@ -71,7 +71,6 @@ class EmailPreviewerDialogView extends StatelessWidget {
               Expanded(
                 child: IosHtmlContentViewerWidget(
                   contentHtml: emlPreviewer.content,
-                  useDefaultFont: true,
                   direction: AppUtils.getCurrentDirection(context),
                   onMailtoDelegateAction: onMailtoDelegateAction,
                   onPreviewEMLDelegateAction: onPreviewEMLDelegateAction,
@@ -89,7 +88,7 @@ class EmailPreviewerDialogView extends StatelessWidget {
           child: HtmlContentViewer(
             contentHtml: emlPreviewer.content,
             initialWidth: context.width,
-            useDefaultFont: true,
+            useDefaultFontStyle: true,
             direction: AppUtils.getCurrentDirection(context),
             onMailtoDelegateAction: onMailtoDelegateAction,
             onPreviewEMLDelegateAction: onPreviewEMLDelegateAction,

lib/features/email_previewer/email_previewer_view.dart

@@ -58,6 +58,7 @@ class EmailPreviewerView extends GetWidget<EmailPreviewerController> {
       widthContent: context.width,
       heightContent: context.height,
       contentHtml: emlPreviewer.content,
+      useDefaultFontStyle: true,
       direction: AppUtils.getCurrentDirection(context),
       onClickHyperLinkAction: controller.onClickHyperLink,
     );

lib/features/identity_creator/presentation/widgets/identity_signature_input_field_widget.dart

@@ -1,5 +1,6 @@
 import 'package:core/presentation/constants/constants_ui.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/utils/html/html_template.dart';
 import 'package:core/utils/html/html_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -143,9 +144,10 @@ class IdentitySignatureInputFieldWidget extends StatelessWidget
         initialText: initContent.isEmpty ? null : initContent,
         disableDragAndDrop: true,
         spellCheck: true,
-        customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(
+        customBodyCssStyle: HtmlUtils.customInlineBodyCssStyleHtmlEditor(
           direction: AppUtils.getCurrentDirection(context),
         ),
+        customInternalCSS: HtmlTemplate.webCustomInternalStyleCSS(),
       ),
       htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
         toolbarType: html_editor_browser.ToolbarType.hide,
@@ -200,7 +202,7 @@ class IdentitySignatureInputFieldWidget extends StatelessWidget
           PlatformInfo.isIOS ? ConstantsUI.composerHtmlContentMaxHeight : null,
       addDefaultSelectionMenuItems: false,
       initialContent: initialContent ?? '',
-      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(
+      customStyleCss: HtmlTemplate.mobileCustomInternalStyleCSS(
         direction: AppUtils.getCurrentDirection(context),
       ),
       onCreated: (editorApi) => controller.initRichTextForMobile(

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -5,6 +5,7 @@ import 'package:core/presentation/utils/keyboard_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/responsive/responsive_widget.dart';
+import 'package:core/utils/html/html_template.dart';
 import 'package:core/utils/html/html_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -484,7 +485,10 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
             cacheHTMLAssetOffline: true,
             initialText: controller.vacationMessageHtmlText,
             spellCheck: true,
-            customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context))
+            customBodyCssStyle: HtmlUtils.customInlineBodyCssStyleHtmlEditor(
+              direction: AppUtils.getCurrentDirection(context),
+            ),
+            customInternalCSS: HtmlTemplate.webCustomInternalStyleCSS(),
           ),
           htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
               toolbarType: html_editor_browser.ToolbarType.hide,
@@ -510,7 +514,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
           maxHeight: PlatformInfo.isIOS ? ConstantsUI.composerHtmlContentMaxHeight : null,
           addDefaultSelectionMenuItems: false,
           initialContent: controller.vacationMessageHtmlText ?? '',
-          customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
+          customStyleCss: HtmlTemplate.mobileCustomInternalStyleCSS(direction: AppUtils.getCurrentDirection(context)),
           onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi)
       );
     }

pubspec.yaml

@@ -377,6 +377,54 @@ flutter:
           weight: 500
         - asset: assets/fonts/Inter/Inter-Regular.ttf
 
+    - family: Roboto
+      fonts:
+        - asset: assets/fonts/fallback/Roboto-Regular.ttf
+
+    - family: NotoSans
+      fonts:
+        - asset: assets/fonts/fallback/NotoSans-Regular.ttf
+
+    - family: NotoSansArabic
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansArabic-Regular.ttf
+
+    - family: NotoSansTamil
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansTamil-Regular.ttf
+
+    - family: NotoSansThai
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansThai-Regular.ttf
+
+    - family: NotoSansKR
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansKR-Regular.ttf
+
+    - family: NotoSansSC
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansSC-Regular.ttf
+
+    - family: NotoSansMath
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansMath-Regular.ttf
+
+    - family: NotoSansEgyptianHieroglyphs
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansEgyptianHieroglyphs-Regular.ttf
+
+    - family: NotoEmoji
+      fonts:
+        - asset: assets/fonts/fallback/NotoEmoji-Regular.ttf
+
+    - family: NotoSansSymbols
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansSymbols-Regular.ttf
+
+    - family: NotoSansSymbols2
+      fonts:
+        - asset: assets/fonts/fallback/NotoSansSymbols2-Regular.ttf
+
 flutter_icons:
   android: true
   ios: false

web/index.html

@@ -33,7 +33,6 @@
   <link rel="manifest" href="manifest.json">
   <link rel="stylesheet" type="text/css" href="splash/style.css">
   <link rel="stylesheet" type="text/css" href="worker_service/style.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 
   <script type="application/javascript" src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
@@ -94,7 +93,9 @@
           }
           _flutter.loader.load({
             onEntrypointLoaded: async function(engineInitializer) {
-              const appRunner = await engineInitializer.initializeEngine();
+              const appRunner = await engineInitializer.initializeEngine({
+                fontFallbackBaseUrl: ''
+              });
               await setTimeout( async function () {
                 await appRunner.runApp();
               }, 2000);
@@ -104,7 +105,9 @@
     } else {
       _flutter.loader.load({
         onEntrypointLoaded: async function(engineInitializer) {
-          const appRunner = await engineInitializer.initializeEngine();
+          const appRunner = await engineInitializer.initializeEngine({
+            fontFallbackBaseUrl: ''
+          });
           await setTimeout( async function () {
             await appRunner.runApp();
           }, 2000);