diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359e52342a..84d2978a00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,10 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) replace Arial font-family with token font #1411
 - ♿(frontend) improve accessibility:
   - #1354
+  - #1349
   - ♿ improve accessibility by adding landmark roles to layout #1394
   - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
@@ -29,8 +31,6 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
-- ♿(frontend) improve accessibility:
-  - #1349
 
 ### Changed
 
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff
new file mode 100644
index 0000000000..335e348813
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff2 b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff2
index 4a5b7b2914..6ea93fd652 100644
Binary files a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff2 and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold.woff2 differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold_Italic.woff
new file mode 100644
index 0000000000..72878fca60
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Bold_Italic.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold.woff
new file mode 100644
index 0000000000..ad85a552a0
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold_Italic.woff
new file mode 100644
index 0000000000..af92ea7ccb
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-ExtraBold_Italic.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light.woff
new file mode 100644
index 0000000000..9ef49df3ad
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light_Italic.woff
new file mode 100644
index 0000000000..5ae0dbea14
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Light_Italic.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff
new file mode 100644
index 0000000000..692476eb21
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff2 b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff2
index 8877adeec9..46a6e19eed 100644
Binary files a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff2 and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium.woff2 differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium_Italic.woff
new file mode 100644
index 0000000000..8e32b88f62
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Medium_Italic.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff
new file mode 100644
index 0000000000..a95a2d0407
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff2 b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff2
index 5d6517c804..d19d7cc99c 100644
Binary files a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff2 and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular.woff2 differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular_Italic.woff
new file mode 100644
index 0000000000..1880c5d75b
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Regular_Italic.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin.woff
new file mode 100644
index 0000000000..6c8bc5a0d2
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin.woff differ
diff --git a/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin_Italic.woff b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin_Italic.woff
new file mode 100644
index 0000000000..4c23d6b987
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-Thin_Italic.woff differ
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 83bf0b3211..80f9da8385 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -13,6 +13,7 @@ export interface TextProps extends BoxProps {
   $ellipsis?: boolean;
   $weight?: CSSProperties['fontWeight'];
   $textAlign?: CSSProperties['textAlign'];
+  $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
@@ -43,6 +44,8 @@ export type TextType = ComponentPropsWithRef<typeof Text>;
 
 export const TextStyled = styled(Box)<TextProps>`
   ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign};`}
+  ${({ $textTransform }) =>
+    $textTransform && `text-transform: ${$textTransform};`}
   ${({ $weight }) => $weight && `font-weight: ${$weight};`}
   ${({ $size }) =>
     $size &&
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 3a1b5c8d37..b79f9e606c 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -38,6 +38,13 @@
   );
 }
 
+/**
+ * Button
+*/
+.c__button {
+  contain: content;
+}
+
 /**
  * Modal
 */
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
index 2a0212a679..2deb388c57 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
@@ -125,13 +125,7 @@ export const DocRoleDropdown = ({
         },
       ]}
     >
-      <Text
-        $theme="primary"
-        $variation="800"
-        $css={css`
-          font-family: Arial, Helvetica, sans-serif;
-        `}
-      >
+      <Text $theme="primary" $variation="800">
         {transRole(currentRole)}
       </Text>
     </DropdownMenu>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
index 780f1ae0c2..31c367700d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
@@ -151,12 +151,12 @@ export const DocShareModalInviteUserRow = ({
             $direction="row"
             $align="center"
             $css={css`
-              font-family: Arial, Helvetica, sans-serif;
-              font-size: var(--c--theme--font--sizes--sm);
-              color: var(--c--theme--colors--greyscale-400);
+              contain: content;
             `}
+            $color="var(--c--theme--colors--greyscale-400)"
+            $cursor="pointer"
           >
-            <Text $theme="primary" $variation="800">
+            <Text $theme="primary" $variation="800" $size="sm">
               {t('Add')}
             </Text>
             <Icon
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
index 76dd73c7af..1cb0b9a580 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import { Box } from '@/components';
+import { Text } from '@/components';
 import { tokens } from '@/cunningham';
 import { User } from '@/features/auth';
 
@@ -37,35 +37,26 @@ export const UserAvatar = ({ user, background }: Props) => {
   const splitName = name?.split(' ');
 
   return (
-    <Box
+    <Text
+      className="--docs--user-avatar"
+      $align="center"
+      $color="rgba(255, 255, 255, 0.9)"
+      $justify="center"
       $background={background || getColorFromName(name)}
       $width="24px"
       $height="24px"
-      $direction="row"
-      $align="center"
-      $justify="center"
       $radius="50%"
+      $size="10px"
+      $textAlign="center"
+      $textTransform="uppercase"
+      $weight={600}
       $css={css`
-        color: rgba(255, 255, 255, 0.9);
         border: 1px solid rgba(255, 255, 255, 0.5);
+        contain: content;
       `}
-      className="--docs--user-avatar"
     >
-      <Box
-        $direction="row"
-        $css={css`
-          text-align: center;
-          font-style: normal;
-          font-weight: 600;
-          font-family:
-            Arial, Helvetica, sans-serif; // Can't use marianne font because it's impossible to center with this font
-          font-size: 10px;
-          text-transform: uppercase;
-        `}
-      >
-        {splitName[0]?.charAt(0)}
-        {splitName?.[1]?.charAt(0)}
-      </Box>
-    </Box>
+      {splitName[0]?.charAt(0)}
+      {splitName?.[1]?.charAt(0)}
+    </Text>
   );
 };