diff --git a/code/core/src/components/components/Popover/Popover.tsx b/code/core/src/components/components/Popover/Popover.tsx
index 06af183284b3..ea5012f672f8 100644
--- a/code/core/src/components/components/Popover/Popover.tsx
+++ b/code/core/src/components/components/Popover/Popover.tsx
@@ -48,6 +48,7 @@ const Wrapper = styled.div<{
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
           borderRadius: theme.appBorderRadius + 2,
+          fontFamily: theme.typography.fonts.base,
           fontSize: theme.typography.size.s1,
         }
       : {},
diff --git a/code/core/src/components/components/tooltip/TooltipNote.tsx b/code/core/src/components/components/tooltip/TooltipNote.tsx
index 9ed692e0078b..e5dedf28cf2a 100644
--- a/code/core/src/components/components/tooltip/TooltipNote.tsx
+++ b/code/core/src/components/components/tooltip/TooltipNote.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { styled } from 'storybook/theming';
 
 const Note = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
   padding: '2px 6px',
   lineHeight: '16px',
   fontSize: 10,
diff --git a/code/core/src/components/components/tooltip/WithTooltip.tsx b/code/core/src/components/components/tooltip/WithTooltip.tsx
index 9e5b6b3b890d..3cb100647e58 100644
--- a/code/core/src/components/components/tooltip/WithTooltip.tsx
+++ b/code/core/src/components/components/tooltip/WithTooltip.tsx
@@ -120,6 +120,7 @@ const Wrapper = styled.div<WrapperProps>(
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
           borderRadius: theme.appBorderRadius + 2,
+          fontFamily: theme.typography.fonts.base,
           fontSize: theme.typography.size.s1,
         }
       : {}