diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index fe8059e0..913a7ecc 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -54,6 +54,7 @@
     .context-menu-option__shortcut {
       justify-self: end;
       opacity: 0.6;
+      font-family: inherit;
       font-size: 0.7rem;
     }
   }
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 27d14d88..e8ec9507 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -52,11 +52,11 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
                 onClick={action}
               >
                 <div className="context-menu-option__label">{label}</div>
-                <div className="context-menu-option__shortcut">
+                <kbd className="context-menu-option__shortcut">
                   {shortcutName
                     ? getShortcutFromShortcutName(shortcutName)
                     : ""}
-                </div>
+                </kbd>
               </button>
             </li>
           ))}
diff --git a/src/components/ShortcutsDialog.scss b/src/components/ShortcutsDialog.scss
index 2feb38fb..6cb6898c 100644
--- a/src/components/ShortcutsDialog.scss
+++ b/src/components/ShortcutsDialog.scss
@@ -29,6 +29,7 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
+    font-family: inherit;
   }
 
   .ShortcutsDialog-footer {
diff --git a/src/components/ShortcutsDialog.tsx b/src/components/ShortcutsDialog.tsx
index ff9327d9..15c57bb2 100644
--- a/src/components/ShortcutsDialog.tsx
+++ b/src/components/ShortcutsDialog.tsx
@@ -82,7 +82,7 @@ Shortcut.defaultProps = {
 };
 
 const ShortcutKey = (props: { children: React.ReactNode }) => (
-  <span className="ShorcutsDialog-key" {...props} />
+  <kbd className="ShorcutsDialog-key" {...props} />
 );
 
 const Footer = () => (