feat(theme): update typography from Lato to Inter for better readability and tabular numbers

Author: nicolastakashi

components/package.json

@@ -32,7 +32,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@codemirror/lang-json": "^6.0.1",
     "@date-fns/tz": "^1.4.1",
-    "@fontsource/lato": "^4.5.10",
+    "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
     "@perses-dev/core": "0.53.0",
     "@perses-dev/spec": "0.2.0-beta.0",

components/src/theme/typography.ts

@@ -11,24 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 import { ThemeOptions } from '@mui/material';
 
 // Font weights need to correspond with the imports at the top of the file
-// (Lato supports 100, 300, 400, 700, 900)
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
-const fontWeightMedium = 700;
+const fontWeightMedium = 600;
 const fontWeightBold = 900;
 
 /**
  * Theme typography options that are the same across both the dark and light themes.
  */
 export const typography: ThemeOptions['typography'] = {
-  fontFamily: '"Lato", sans-serif',
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
 
   fontWeightLight,
   fontWeightRegular,