diff --git a/packages/docs/src/components/layout/search/Search.tsx b/packages/docs/src/components/layout/search/Search.tsx
index 754a1979..6d723d81 100644
--- a/packages/docs/src/components/layout/search/Search.tsx
+++ b/packages/docs/src/components/layout/search/Search.tsx
@@ -65,7 +65,8 @@ const Search = ({ searchablePages }: SearchProps) => {
           variant="body2"
           color="inherit"
           sx={{
-            fontFamily: "'Roboto',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif",
+            fontFamily:
+              "'Roboto',system-ui,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif",
             fontWeight: 400,
             fontSize: '16px',
             opacity: 0.8,
diff --git a/packages/docs/src/styles/theme.ts b/packages/docs/src/styles/theme.ts
index 25bb1450..d5c98882 100644
--- a/packages/docs/src/styles/theme.ts
+++ b/packages/docs/src/styles/theme.ts
@@ -58,7 +58,8 @@ const useCreateTheme = (mode: PaletteMode) => {
       createTheme({
         palette,
         typography: {
-          fontFamily: "'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+          fontFamily:
+            "'Roboto', system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
           h1: {
             fontSize: '42px',
             fontWeight: 'bold',