diff --git a/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js b/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
index 3bd16401247..52a4eb9198f 100644
--- a/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
+++ b/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
@@ -78,7 +78,7 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
             }
             var accesskeyElements = $(document).find('[accesskey]').filter(':visible');
             _.each(accesskeyElements, function (elem) {
-                var overlay = $(_.str.sprintf("<div class='o_web_accesskey_overlay'>%s</div>", $(elem).attr('accesskey').toUpperCase()));
+                var overlay = $(_.str.sprintf("<div class='o_web_accesskey_overlay font-sans-serif'>%s</div>", $(elem).attr('accesskey').toUpperCase()));
 
                 var $overlayParent;
                 if (elem.tagName.toUpperCase() === "INPUT") {
diff --git a/addons/web/static/src/libs/bootstrap/utilities_custom.scss b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
index 02bd76ac428..ad9e29d231c 100644
--- a/addons/web/static/src/libs/bootstrap/utilities_custom.scss
+++ b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
@@ -103,6 +103,15 @@ $utilities: map-merge(
                 values: $utilities-sizes,
             ),
         ),
+        "font-family":  map-merge(
+            map-get($utilities, "font-family"),
+            (
+                values: map-merge(
+                    map-get(map-get($utilities, "font-family"), "values"),
+                    (sans-serif: var(--#{$variable-prefix}font-sans-serif)),
+                ),
+            ),
+        ),
     ),
 );
 
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 678e97c78f1..f5fe38561fd 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -52,10 +52,6 @@ kbd {
   @include bg-variant(".bg-#{$-name}-light", rgba(map-get($theme-colors, $-name), 0.5), $-safe-text-color);
 }
 
-.o_web_accesskey_overlay {
-  font-family: $font-family-sans-serif;
-}
-
 //== Badges
 .badge {
   min-width: $o-badge-min-width;