diff --git a/web/src/assets/styles/keyboard.css b/web/src/assets/styles/keyboard.css
index 7ec4d6c..59497ce 100644
--- a/web/src/assets/styles/keyboard.css
+++ b/web/src/assets/styles/keyboard.css
@@ -99,3 +99,7 @@
   font-size: 14px;
   line-height: 16px;
 }
+
+.keyboard-header {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
diff --git a/web/src/pages/desktop/keyboard/virtual-keyboard.tsx b/web/src/pages/desktop/keyboard/virtual-keyboard.tsx
index 8d54233..322c253 100644
--- a/web/src/pages/desktop/keyboard/virtual-keyboard.tsx
+++ b/web/src/pages/desktop/keyboard/virtual-keyboard.tsx
@@ -153,7 +153,7 @@ export const VirtualKeyboard = ({ isBigScreen }: KeyboardProps) => {
           {/* header */}
           <div className="flex items-center justify-between px-3 py-1">
             <div className="flex flex-row">
-              <div className="w-fit my-auto mr-2 text-sm font-bold text-neutral-500">
+              <div className="keyboard-header w-fit my-auto mr-2 text-sm font-bold text-neutral-500">
                 {t('keyboard')}
               </div>
               <Radio.Group