refactor(fonts): change all fonts to Inter

chanzuckerberg · Feb 13, 2024 · f510e62 · f510e62
1 parent ecab23c
commit f510e62
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/.storybook/sds-theme.js b/.storybook/sds-theme.js
@@ -15,7 +15,7 @@ export default create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"Open Sans", sans-serif',
+  fontBase: '"Inter", sans-serif',
   fontCode: "monospace",
 
   // Text colors

diff --git a/packages/components/src/core/Link/index.stories.tsx b/packages/components/src/core/Link/index.stories.tsx
@@ -38,7 +38,7 @@ export const Default = {
 
 const livePreviewStyles = {
   display: "grid",
-  fontFamily: "Open Sans",
+  fontFamily: "Inter",
   gridColumnGap: "24px",
   gridTemplateColumns: "repeat(2, 250px)",
 };

diff --git a/packages/components/src/core/NavigationJumpTo/__snapshots__/index.test.tsx.snap b/packages/components/src/core/NavigationJumpTo/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
   class="MuiBox-root css-0"
 >
   <div
-    class="MuiBox-root css-1r7i9e6"
+    class="MuiBox-root css-1bqrueo"
   >
     <p
       id="nav-item-height-slider"
@@ -226,7 +226,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-1"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -244,7 +244,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-2"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -262,7 +262,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-3"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -280,7 +280,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-4"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -298,7 +298,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-5"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"

diff --git a/packages/components/src/core/NavigationJumpTo/index.stories.tsx b/packages/components/src/core/NavigationJumpTo/index.stories.tsx
@@ -25,7 +25,7 @@ const TabPanel = React.forwardRef<HTMLDivElement, TabPanelPropsExtra>(
           backgroundColor: "#f4f4f4",
           color: "black",
           display: "flex",
-          fontFamily: "Open Sans, sans-serif",
+          fontFamily: "Inter, sans-serif",
           fontSize: "36px",
           fontWeight: 100,
           justifyContent: "center",
@@ -58,7 +58,7 @@ const NavigationJumpTo = (props: Args): JSX.Element => {
     <Box>
       <Box
         sx={{
-          fontFamily: "Open Sans, sans-serif",
+          fontFamily: "Inter, sans-serif",
           margin: "0 0 30px 6px",
           width: 250,
         }}

diff --git a/packages/components/src/core/styles/common/defaultTheme.ts b/packages/components/src/core/styles/common/defaultTheme.ts
@@ -115,7 +115,7 @@ export const defaultAppTheme: AppTheme = {
     xxxs: 2,
   },
   typography: {
-    fontFamily: "Open Sans",
+    fontFamily: "Inter",
     styles: {
       body: {
         button: {