diff --git a/src/main/utils/windowUtil.ts b/src/main/utils/windowUtil.ts
index d64929deb1..4000156fff 100644
--- a/src/main/utils/windowUtil.ts
+++ b/src/main/utils/windowUtil.ts
@@ -1,5 +1,7 @@
 import { BrowserWindow } from 'electron'
 
+import { isDev, isWin } from '../constant'
+
 function isTilingWindowManager() {
   if (process.platform === 'darwin') {
     return false
@@ -15,31 +17,59 @@ function isTilingWindowManager() {
   return tilingSystems.some((system) => desktopEnv?.includes(system))
 }
 
+//see: https://github.com/electron/electron/issues/42055#issuecomment-2449365647
 export const replaceDevtoolsFont = (browserWindow: BrowserWindow) => {
-  if (process.platform === 'win32') {
+  //only for windows and dev, don't do this in production to avoid performance issues
+  if (isWin && isDev) {
     browserWindow.webContents.on('devtools-opened', () => {
       const css = `
         :root {
             --sys-color-base: var(--ref-palette-neutral100);
-            --source-code-font-family: consolas;
+            --source-code-font-family: consolas !important;
             --source-code-font-size: 12px;
-            --monospace-font-family: consolas;
+            --monospace-font-family: consolas !important;
             --monospace-font-size: 12px;
             --default-font-family: system-ui, sans-serif;
             --default-font-size: 12px;
+            --ref-palette-neutral99: #ffffffff;
         }
-        .-theme-with-dark-background {
+        .theme-with-dark-background {
             --sys-color-base: var(--ref-palette-secondary25);
         }
         body {
-            --default-font-family: system-ui,sans-serif;
-        }`
-
+            --default-font-family: system-ui, sans-serif;
+        }
+    `
       browserWindow.webContents.devToolsWebContents?.executeJavaScript(`
         const overriddenStyle = document.createElement('style');
         overriddenStyle.innerHTML = '${css.replaceAll('\n', ' ')}';
         document.body.append(overriddenStyle);
-        document.body.classList.remove('platform-windows');`)
+        document.querySelectorAll('.platform-windows').forEach(el => el.classList.remove('platform-windows'));
+        addStyleToAutoComplete();
+        const observer = new MutationObserver((mutationList, observer) => {
+            for (const mutation of mutationList) {
+                if (mutation.type === 'childList') {
+                    for (let i = 0; i < mutation.addedNodes.length; i++) {
+                        const item = mutation.addedNodes[i];
+                        if (item.classList.contains('editor-tooltip-host')) {
+                            addStyleToAutoComplete();
+                        }
+                    }
+                }
+            }
+        });
+        observer.observe(document.body, {childList: true});
+        function addStyleToAutoComplete() {
+            document.querySelectorAll('.editor-tooltip-host').forEach(element => {
+                if (element.shadowRoot.querySelectorAll('[data-key="overridden-dev-tools-font"]').length === 0) {
+                    const overriddenStyle = document.createElement('style');
+                    overriddenStyle.setAttribute('data-key', 'overridden-dev-tools-font');
+                    overriddenStyle.innerHTML = '.cm-tooltip-autocomplete ul[role=listbox] {font-family: consolas !important;}';
+                    element.shadowRoot.append(overriddenStyle);
+                }
+            });
+        }
+    `)
     })
   }
 }
diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
new file mode 100644
index 0000000000..c142e8e270
--- /dev/null
+++ b/src/renderer/src/assets/styles/color.scss
@@ -0,0 +1,130 @@
+:root {
+  --color-white: #ffffff;
+  --color-white-soft: rgba(255, 255, 255, 0.8);
+  --color-white-mute: rgba(255, 255, 255, 0.94);
+
+  --color-black: #181818;
+  --color-black-soft: #222222;
+  --color-black-mute: #333333;
+
+  --color-gray-1: #515c67;
+  --color-gray-2: #414853;
+  --color-gray-3: #32363f;
+
+  --color-text-1: rgba(255, 255, 245, 0.9);
+  --color-text-2: rgba(235, 235, 245, 0.6);
+  --color-text-3: rgba(235, 235, 245, 0.38);
+
+  --color-background: var(--color-black);
+  --color-background-soft: var(--color-black-soft);
+  --color-background-mute: var(--color-black-mute);
+  --color-background-opacity: rgba(34, 34, 34, 0.7);
+  --inner-glow-opacity: 0.3; // For the glassmorphism effect in the dropdown menu
+
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
+
+  --color-text: var(--color-text-1);
+  --color-icon: #ffffff99;
+  --color-icon-white: #ffffff;
+  --color-border: #ffffff19;
+  --color-border-soft: #ffffff10;
+  --color-border-mute: #ffffff05;
+  --color-error: #f44336;
+  --color-link: #338cff;
+  --color-code-background: #323232;
+  --color-hover: rgba(40, 40, 40, 1);
+  --color-active: rgba(55, 55, 55, 1);
+  --color-frame-border: #333;
+  --color-group-background: var(--color-background-soft);
+
+  --color-reference: #404040;
+  --color-reference-text: #ffffff;
+  --color-reference-background: #0b0e12;
+
+  --modal-background: #1f1f1f;
+
+  --color-highlight: rgba(0, 0, 0, 1);
+  --color-background-highlight: rgba(255, 255, 0, 0.9);
+  --color-background-highlight-accent: rgba(255, 150, 50, 0.9);
+
+  --navbar-background-mac: rgba(20, 20, 20, 0.55);
+  --navbar-background: #1f1f1f;
+
+  --navbar-height: 40px;
+  --sidebar-width: 50px;
+  --status-bar-height: 40px;
+  --input-bar-height: 100px;
+
+  --assistants-width: 275px;
+  --topic-list-width: 275px;
+  --settings-width: 250px;
+
+  --chat-background: #111111;
+  --chat-background-user: #28b561;
+  --chat-background-assistant: #2c2c2c;
+  --chat-text-user: var(--color-black);
+
+  --list-item-border-radius: 16px;
+}
+
+[theme-mode='light'] {
+  --color-white: #ffffff;
+  --color-white-soft: rgba(0, 0, 0, 0.04);
+  --color-white-mute: #eee;
+
+  --color-black: #1b1b1f;
+  --color-black-soft: #262626;
+  --color-black-mute: #363636;
+
+  --color-gray-1: #8e8e93;
+  --color-gray-2: #aeaeb2;
+  --color-gray-3: #c7c7cc;
+
+  --color-text-1: rgba(0, 0, 0, 1);
+  --color-text-2: rgba(0, 0, 0, 0.6);
+  --color-text-3: rgba(0, 0, 0, 0.38);
+
+  --color-background: var(--color-white);
+  --color-background-soft: var(--color-white-soft);
+  --color-background-mute: var(--color-white-mute);
+  --color-background-opacity: rgba(235, 235, 235, 0.7);
+  --inner-glow-opacity: 0.1;
+
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
+
+  --color-text: var(--color-text-1);
+  --color-icon: #00000099;
+  --color-icon-white: #000000;
+  --color-border: #00000019;
+  --color-border-soft: #00000010;
+  --color-border-mute: #00000005;
+  --color-error: #f44336;
+  --color-link: #1677ff;
+  --color-code-background: #e3e3e3;
+  --color-hover: var(--color-white-mute);
+  --color-active: var(--color-white-soft);
+  --color-frame-border: #ddd;
+  --color-group-background: var(--color-white);
+
+  --color-reference: #cfe1ff;
+  --color-reference-text: #000000;
+  --color-reference-background: #f1f7ff;
+
+  --modal-background: var(--color-white);
+
+  --color-highlight: initial;
+  --color-background-highlight: rgba(255, 255, 0, 0.5);
+  --color-background-highlight-accent: rgba(255, 150, 50, 0.5);
+
+  --navbar-background-mac: rgba(255, 255, 255, 0.55);
+  --navbar-background: rgba(244, 244, 244);
+
+  --chat-background: #f3f3f3;
+  --chat-background-user: #95ec69;
+  --chat-background-assistant: #ffffff;
+  --chat-text-user: var(--color-text);
+}
diff --git a/src/renderer/src/assets/styles/font.scss b/src/renderer/src/assets/styles/font.scss
new file mode 100644
index 0000000000..9d2d139b53
--- /dev/null
+++ b/src/renderer/src/assets/styles/font.scss
@@ -0,0 +1,12 @@
+:root {
+  --font-family:
+    Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans',
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  --font-family-serif:
+    serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans',
+    'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace;
+}
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index e44a973fe8..17bc04d6cc 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -1,3 +1,5 @@
+@use './color.scss';
+@use './font.scss';
 @use './markdown.scss';
 @use './ant.scss';
 @use './scrollbar.scss';
@@ -6,77 +8,6 @@
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
 
-:root {
-  --color-white: #ffffff;
-  --color-white-soft: rgba(255, 255, 255, 0.8);
-  --color-white-mute: rgba(255, 255, 255, 0.94);
-
-  --color-black: #181818;
-  --color-black-soft: #222222;
-  --color-black-mute: #333333;
-
-  --color-gray-1: #515c67;
-  --color-gray-2: #414853;
-  --color-gray-3: #32363f;
-
-  --color-text-1: rgba(255, 255, 245, 0.9);
-  --color-text-2: rgba(235, 235, 245, 0.6);
-  --color-text-3: rgba(235, 235, 245, 0.38);
-
-  --color-background: var(--color-black);
-  --color-background-soft: var(--color-black-soft);
-  --color-background-mute: var(--color-black-mute);
-  --color-background-opacity: rgba(34, 34, 34, 0.7);
-  --inner-glow-opacity: 0.3; // For the glassmorphism effect in the dropdown menu
-
-  --color-primary: #00b96b;
-  --color-primary-soft: #00b96b99;
-  --color-primary-mute: #00b96b33;
-
-  --color-text: var(--color-text-1);
-  --color-icon: #ffffff99;
-  --color-icon-white: #ffffff;
-  --color-border: #ffffff19;
-  --color-border-soft: #ffffff10;
-  --color-border-mute: #ffffff05;
-  --color-error: #f44336;
-  --color-link: #338cff;
-  --color-code-background: #323232;
-  --color-hover: rgba(40, 40, 40, 1);
-  --color-active: rgba(55, 55, 55, 1);
-  --color-frame-border: #333;
-  --color-group-background: var(--color-background-soft);
-
-  --color-reference: #404040;
-  --color-reference-text: #ffffff;
-  --color-reference-background: #0b0e12;
-
-  --modal-background: #1f1f1f;
-
-  --color-highlight: rgba(0, 0, 0, 1);
-  --color-background-highlight: rgba(255, 255, 0, 0.9);
-  --color-background-highlight-accent: rgba(255, 150, 50, 0.9);
-
-  --navbar-background-mac: rgba(20, 20, 20, 0.55);
-  --navbar-background: #1f1f1f;
-
-  --navbar-height: 40px;
-  --sidebar-width: 50px;
-  --status-bar-height: 40px;
-  --input-bar-height: 100px;
-
-  --assistants-width: 275px;
-  --topic-list-width: 275px;
-  --settings-width: 250px;
-
-  --chat-background: #111111;
-  --chat-background-user: #28b561;
-  --chat-background-assistant: #2c2c2c;
-  --chat-text-user: var(--color-black);
-
-  --list-item-border-radius: 16px;
-}
-
 body {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -84,66 +15,6 @@ body {
   user-select: none;
 }
 
-body[theme-mode='light'] {
-  --color-white: #ffffff;
-  --color-white-soft: rgba(0, 0, 0, 0.04);
-  --color-white-mute: #eee;
-
-  --color-black: #1b1b1f;
-  --color-black-soft: #262626;
-  --color-black-mute: #363636;
-
-  --color-gray-1: #8e8e93;
-  --color-gray-2: #aeaeb2;
-  --color-gray-3: #c7c7cc;
-
-  --color-text-1: rgba(0, 0, 0, 1);
-  --color-text-2: rgba(0, 0, 0, 0.6);
-  --color-text-3: rgba(0, 0, 0, 0.38);
-
-  --color-background: var(--color-white);
-  --color-background-soft: var(--color-white-soft);
-  --color-background-mute: var(--color-white-mute);
-  --color-background-opacity: rgba(235, 235, 235, 0.7);
-  --inner-glow-opacity: 0.1;
-
-  --color-primary: #00b96b;
-  --color-primary-soft: #00b96b99;
-  --color-primary-mute: #00b96b33;
-
-  --color-text: var(--color-text-1);
-  --color-icon: #00000099;
-  --color-icon-white: #000000;
-  --color-border: #00000019;
-  --color-border-soft: #00000010;
-  --color-border-mute: #00000005;
-  --color-error: #f44336;
-  --color-link: #1677ff;
-  --color-code-background: #e3e3e3;
-  --color-hover: var(--color-white-mute);
-  --color-active: var(--color-white-soft);
-  --color-frame-border: #ddd;
-  --color-group-background: var(--color-white);
-
-  --color-reference: #cfe1ff;
-  --color-reference-text: #000000;
-  --color-reference-background: #f1f7ff;
-
-  --modal-background: var(--color-white);
-
-  --color-highlight: initial;
-  --color-background-highlight: rgba(255, 255, 0, 0.5);
-  --color-background-highlight-accent: rgba(255, 150, 50, 0.5);
-
-  --navbar-background-mac: rgba(255, 255, 255, 0.55);
-  --navbar-background: rgba(244, 244, 244);
-
-  --chat-background: #f3f3f3;
-  --chat-background-user: #95ec69;
-  --chat-background-assistant: #ffffff;
-  --chat-text-user: var(--color-text);
-}
-
 *,
 *::before,
 *::after {
@@ -171,9 +42,7 @@ body {
   font-size: 14px;
   line-height: 1.6;
   overflow: hidden;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-family);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss
index c96e5b2f58..40c0255468 100644
--- a/src/renderer/src/assets/styles/markdown.scss
+++ b/src/renderer/src/assets/styles/markdown.scss
@@ -20,10 +20,8 @@
   h5,
   h6 {
     margin: 1em 0 1em 0;
-    font-weight: 800;
-    font-family:
-      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-      sans-serif;
+    font-weight: bold;
+    font-family: var(--font-family);
   }
 
   h1 {
@@ -117,7 +115,7 @@
   }
 
   code {
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-family: var(--code-font-family);
   }
 
   pre {
@@ -155,7 +153,7 @@
     padding-left: 1em;
     color: var(--color-text-light);
     border-left: 4px solid var(--color-border);
-    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-family: var(--font-family);
   }
 
   table {
@@ -173,9 +171,7 @@
   th {
     background-color: var(--color-background-mute);
     font-weight: bold;
-    font-family:
-      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-      sans-serif;
+    font-family: var(--font-family);
   }
 
   img {
@@ -310,7 +306,7 @@ mjx-container {
 /* CodeMirror 相关样式 */
 .cm-editor {
   .cm-scroller {
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-family: var(--code-font-family);
     padding: 1px;
     border-radius: 5px;
 
diff --git a/src/renderer/src/components/Layout/index.ts b/src/renderer/src/components/Layout/index.ts
index 2e5a0b608a..6ebc5788c5 100644
--- a/src/renderer/src/components/Layout/index.ts
+++ b/src/renderer/src/components/Layout/index.ts
@@ -149,15 +149,6 @@ export const BaseTypography = styled(Box)<{
   text-align: ${(props) => props.textAlign || 'left'};
 `
 
-export const TypographyNormal = styled(BaseTypography)`
-  font-family: 'Ubuntu';
-`
-
-export const TypographyBold = styled(BaseTypography)`
-  font-family: 'Ubuntu';
-  font-weight: bold;
-`
-
 export const Container = styled.main<ContainerProps>`
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/src/components/ListItem/index.tsx b/src/renderer/src/components/ListItem/index.tsx
index b3d4132845..b93f86b8f6 100644
--- a/src/renderer/src/components/ListItem/index.tsx
+++ b/src/renderer/src/components/ListItem/index.tsx
@@ -35,7 +35,6 @@ const ListItemContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   position: relative;
-  font-family: Ubuntu;
   cursor: pointer;
   border: 1px solid transparent;
 
diff --git a/src/renderer/src/components/ModelIdWithTags.tsx b/src/renderer/src/components/ModelIdWithTags.tsx
index cfd109d0aa..4b8ca86123 100644
--- a/src/renderer/src/components/ModelIdWithTags.tsx
+++ b/src/renderer/src/components/ModelIdWithTags.tsx
@@ -57,7 +57,6 @@ const NameSpan = styled.span`
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: help;
-  font-family: 'Ubuntu';
   line-height: 30px;
 `
 
diff --git a/src/renderer/src/components/QuickPanel/view.tsx b/src/renderer/src/components/QuickPanel/view.tsx
index 1602b6a4ac..ae05ac3466 100644
--- a/src/renderer/src/components/QuickPanel/view.tsx
+++ b/src/renderer/src/components/QuickPanel/view.tsx
@@ -647,7 +647,6 @@ const QuickPanelItem = styled.div`
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.1s ease;
-  font-family: Ubuntu;
   &.selected {
     background-color: var(--selected-color);
     &.focused {
diff --git a/src/renderer/src/config/constant.ts b/src/renderer/src/config/constant.ts
index 5d2376d12f..db5f2c9174 100644
--- a/src/renderer/src/config/constant.ts
+++ b/src/renderer/src/config/constant.ts
@@ -3,8 +3,6 @@ export const DEFAULT_CONTEXTCOUNT = 5
 export const DEFAULT_MAX_TOKENS = 4096
 export const DEFAULT_KNOWLEDGE_DOCUMENT_COUNT = 6
 export const DEFAULT_KNOWLEDGE_THRESHOLD = 0.0
-export const FONT_FAMILY =
-  "Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
 
 export const platform = window.electron?.process?.platform
 export const isMac = platform === 'darwin'
diff --git a/src/renderer/src/context/AntdProvider.tsx b/src/renderer/src/context/AntdProvider.tsx
index 094144d8de..fdeed3d688 100644
--- a/src/renderer/src/context/AntdProvider.tsx
+++ b/src/renderer/src/context/AntdProvider.tsx
@@ -37,10 +37,14 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           },
           Collapse: {
             headerBg: 'transparent'
+          },
+          Tooltip: {
+            fontSize: 13
           }
         },
         token: {
-          colorPrimary: '#00b96b'
+          colorPrimary: '#00b96b',
+          fontFamily: 'var(--font-family)'
         }
       }}>
       {children}
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index aa5f310539..f5815be57e 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -1143,7 +1143,6 @@ const Textarea = styled(TextArea)`
   border-radius: 0;
   display: flex;
   flex: 1;
-  font-family: Ubuntu;
   resize: none !important;
   overflow: auto;
   width: 100%;
diff --git a/src/renderer/src/pages/home/Inputbar/TokenCount.tsx b/src/renderer/src/pages/home/Inputbar/TokenCount.tsx
index c2a0ee5068..a07071acb2 100644
--- a/src/renderer/src/pages/home/Inputbar/TokenCount.tsx
+++ b/src/renderer/src/pages/home/Inputbar/TokenCount.tsx
@@ -74,7 +74,6 @@ const Container = styled.div`
   z-index: 10;
   padding: 3px 10px;
   user-select: none;
-  font-family: Ubuntu;
   border: 0.5px solid var(--color-text-3);
   border-radius: 20px;
   display: flex;
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 86d5d22c2b..2e79850a91 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -1,5 +1,4 @@
 import ContextMenu from '@renderer/components/ContextMenu'
-import { FONT_FAMILY } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useModel } from '@renderer/hooks/useModel'
 import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
@@ -10,7 +9,7 @@ import { Assistant, Topic } from '@renderer/types'
 import type { Message } from '@renderer/types/newMessage'
 import { classNames } from '@renderer/utils'
 import { Divider } from 'antd'
-import React, { Dispatch, FC, memo, SetStateAction, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { Dispatch, FC, memo, SetStateAction, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -54,10 +53,6 @@ const MessageItem: FC<Props> = ({
   const isAssistantMessage = message.role === 'assistant'
   const showMenubar = !isStreaming && !message.status.includes('ing')
 
-  const fontFamily = useMemo(() => {
-    return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
-  }, [messageFont])
-
   const messageBorder = showMessageDivider ? undefined : 'none'
   const messageBackground = getMessageBackground(isBubbleStyle, isAssistantMessage)
 
@@ -113,7 +108,12 @@ const MessageItem: FC<Props> = ({
                 ? 'message-content-container message-content-container-assistant'
                 : 'message-content-container'
           }
-          style={{ fontFamily, fontSize, background: messageBackground, overflowY: 'visible' }}>
+          style={{
+            fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
+            fontSize,
+            background: messageBackground,
+            overflowY: 'visible'
+          }}>
           <MessageErrorBoundary>
             <MessageContent message={message} />
           </MessageErrorBoundary>
diff --git a/src/renderer/src/pages/home/Messages/MessageHeader.tsx b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
index eaed4b08a5..ff765403d2 100644
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@@ -143,7 +143,6 @@ const UserName = styled.div<{ isBubbleStyle?: boolean; theme?: string }>`
 const MessageTime = styled.div`
   font-size: 10px;
   color: var(--color-text-3);
-  font-family: 'Ubuntu';
 `
 
 export default MessageHeader
diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index a2ed2715ed..ac8e355d5f 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
@@ -241,7 +241,6 @@ const Container = styled.div`
   padding: 0 10px;
   height: 37px;
   position: relative;
-  font-family: Ubuntu;
   border-radius: var(--list-item-border-radius);
   border: 0.5px solid transparent;
   width: calc(var(--assistants-width) - 20px);
diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
index 52e84445c1..b2f291a837 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
@@ -89,7 +89,6 @@ const AssistantAddItem = styled.div`
   padding: 7px 12px;
   position: relative;
   padding-right: 35px;
-  font-family: Ubuntu;
   border-radius: var(--list-item-border-radius);
   border: 0.5px solid transparent;
   cursor: pointer;
diff --git a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
index 8970c64397..d2fed14e03 100644
--- a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
@@ -457,13 +457,11 @@ const Container = styled(Scrollbar)`
 const TopicListItem = styled.div`
   padding: 7px 12px;
   border-radius: var(--list-item-border-radius);
-  font-family: Ubuntu;
   font-size: 13px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
-  font-family: Ubuntu;
   cursor: pointer;
   border: 0.5px solid transparent;
   position: relative;
diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx
index 06ad4516bb..59aca8bf72 100644
--- a/src/renderer/src/pages/home/Tabs/index.tsx
+++ b/src/renderer/src/pages/home/Tabs/index.tsx
@@ -155,6 +155,8 @@ const TabContent = styled.div`
 `
 
 const Segmented = styled(AntSegmented)`
+  font-family: var(--font-family);
+
   &.ant-segmented {
     background-color: transparent;
     border-radius: 0 !important;
diff --git a/src/renderer/src/pages/knowledge/KnowledgePage.tsx b/src/renderer/src/pages/knowledge/KnowledgePage.tsx
index a0b00e6aea..d1cbb1e353 100644
--- a/src/renderer/src/pages/knowledge/KnowledgePage.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgePage.tsx
@@ -212,7 +212,6 @@ const AddKnowledgeItem = styled.div`
   justify-content: space-between;
   padding: 7px 12px;
   position: relative;
-  font-family: Ubuntu;
   border-radius: var(--list-item-border-radius);
   border: 0.5px solid transparent;
   cursor: pointer;
diff --git a/src/renderer/src/pages/paintings/AihubmixPage.tsx b/src/renderer/src/pages/paintings/AihubmixPage.tsx
index 69ef3eabf3..6d1a7eaa18 100644
--- a/src/renderer/src/pages/paintings/AihubmixPage.tsx
+++ b/src/renderer/src/pages/paintings/AihubmixPage.tsx
@@ -662,7 +662,6 @@ const Textarea = styled(TextArea)`
   border-radius: 0;
   display: flex;
   flex: 1;
-  font-family: Ubuntu;
   resize: none !important;
   overflow: auto;
   width: auto;
diff --git a/src/renderer/src/pages/paintings/PaintingsPage.tsx b/src/renderer/src/pages/paintings/PaintingsPage.tsx
index 093105e08f..34f6929148 100644
--- a/src/renderer/src/pages/paintings/PaintingsPage.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsPage.tsx
@@ -564,7 +564,6 @@ const Textarea = styled(TextArea)`
   border-radius: 0;
   display: flex;
   flex: 1;
-  font-family: Ubuntu;
   resize: none !important;
   overflow: auto;
   width: auto;
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
index 399e9c7678..3f6b6eb8ae 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
@@ -190,7 +190,6 @@ const ServerName = styled.div`
 const ServerNameText = styled.span`
   font-size: 15px;
   font-weight: 500;
-  font-family: Ubuntu;
 `
 
 const StatusIndicator = styled.div`
diff --git a/src/renderer/src/pages/settings/ProviderSettings/index.tsx b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
index cd2f66a0bb..4a87b97b36 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
@@ -353,7 +353,6 @@ const ProviderLogo = styled(Avatar)`
 const ProviderItemName = styled.div`
   margin-left: 10px;
   font-weight: 500;
-  font-family: Ubuntu;
 `
 
 const AddButtonWrapper = styled.div`
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index bd3230dfe5..19c1931ec8 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -12,7 +12,6 @@ export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
   padding-top: 15px;
   padding-bottom: 75px;
   overflow-y: scroll;
-  font-family: Ubuntu;
   background: ${(props) => (props.theme === 'dark' ? 'transparent' : 'var(--color-background-soft)')};
 
   &::-webkit-scrollbar {
diff --git a/src/renderer/src/windows/mini/chat/components/Message.tsx b/src/renderer/src/windows/mini/chat/components/Message.tsx
index a22e66147a..de262a72b1 100644
--- a/src/renderer/src/windows/mini/chat/components/Message.tsx
+++ b/src/renderer/src/windows/mini/chat/components/Message.tsx
@@ -1,11 +1,10 @@
-import { FONT_FAMILY } from '@renderer/config/constant'
 import { useSettings } from '@renderer/hooks/useSettings'
 // import MessageContent from './MessageContent'
 import MessageContent from '@renderer/pages/home/Messages/MessageContent'
 import MessageErrorBoundary from '@renderer/pages/home/Messages/MessageErrorBoundary'
 // import { LegacyMessage } from '@renderer/types'
 import type { Message } from '@renderer/types/newMessage'
-import { FC, memo, useMemo, useRef } from 'react'
+import { FC, memo, useRef } from 'react'
 import styled from 'styled-components'
 
 interface Props {
@@ -28,10 +27,6 @@ const MessageItem: FC<Props> = ({ message, index, total, route }) => {
 
   const isAssistantMessage = message.role === 'assistant'
 
-  const fontFamily = useMemo(() => {
-    return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
-  }, [messageFont])
-
   const messageBackground = getMessageBackground(true, isAssistantMessage)
 
   const maxWidth = '800px'
@@ -48,7 +43,7 @@ const MessageItem: FC<Props> = ({ message, index, total, route }) => {
       <MessageContentContainer
         className="message-content-container"
         style={{
-          fontFamily,
+          fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
           fontSize,
           background: messageBackground,
           ...(isAssistantMessage ? { paddingLeft: 5, paddingRight: 5 } : {})