fix: preserve popup typography inside page containers

Author: StekPerepolnen

src/components/ContentWithPopup/ContentWithPopup.tsx

@@ -19,6 +19,7 @@ export const ContentWithPopup = ({
     pinOnClick,
     hasArrow = true,
     placement = ['top', 'bottom'],
+    floatingStyles,
     ...props
 }: ContentWithPopupProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
@@ -46,6 +47,7 @@ export const ContentWithPopup = ({
         <React.Fragment>
             <Popup
                 container={container}
+                floatingStyles={{fontFamily: 'var(--g-text-body-font-family)', ...floatingStyles}}
                 anchorElement={anchor.current}
                 open={isPinned || isPopupVisible}
                 placement={placement}

src/components/HoverPopup/HoverPopup.tsx

@@ -160,6 +160,8 @@ export const HoverPopup = ({
             {anchorElement ? (
                 <Popup
                     container={container}
+                    // Keep portal typography when the page uses a different font.
+                    floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {