add a custom font for consistency across platforms

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gerbil",
   "productName": "Gerbil",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Run Large Language Models locally",
   "main": "out/main/index.js",
   "homepage": "./",
@@ -64,6 +64,7 @@
     "vite": "^7.1.5"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.2.7",
     "@mantine/core": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
     "@types/yauzl": "^2.10.3",

src/components/settings/AboutTab.tsx

@@ -81,7 +81,7 @@ export const AboutTab = () => {
           />
           <div style={{ flex: 1, minWidth: 0 }}>
             <Group align="center" gap="md" wrap="nowrap">
-              <Text size="xl" fw={700}>
+              <Text size="xl" fw={600}>
                 {PRODUCT_NAME}
               </Text>
               <Badge

src/components/settings/AppearanceTab.tsx

@@ -190,20 +190,6 @@ export const AppearanceTab = () => {
               min={ZOOM.MIN_LEVEL}
               max={ZOOM.MAX_LEVEL}
               step={0.25}
-              marks={[
-                {
-                  value: ZOOM.MIN_LEVEL,
-                  label: `${ZOOM.MIN_PERCENTAGE}%`,
-                },
-                {
-                  value: ZOOM.DEFAULT_LEVEL,
-                  label: `${ZOOM.DEFAULT_PERCENTAGE}%`,
-                },
-                {
-                  value: ZOOM.MAX_LEVEL,
-                  label: `${ZOOM.MAX_PERCENTAGE}%`,
-                },
-              ]}
               label={(value) => `${zoomLevelToPercentage(value)}%`}
               style={{ marginBottom: '0.5rem' }}
             />

src/constants/index.ts

@@ -100,10 +100,10 @@ export const FRONTENDS = {
 } as const;
 
 export const ZOOM = {
-  MIN_LEVEL: -5,
-  MAX_LEVEL: 5,
+  MIN_LEVEL: -3,
+  MAX_LEVEL: 3,
   MIN_PERCENTAGE: 25,
-  MAX_PERCENTAGE: 500,
+  MAX_PERCENTAGE: 300,
   DEFAULT_LEVEL: 0,
   DEFAULT_PERCENTAGE: 100,
 } as const;

src/main.tsx

@@ -1,12 +1,19 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider, createTheme } from '@mantine/core';
 import { App } from '@/App.tsx';
 import '@/styles/index.css';
 
+const theme = createTheme({
+  fontFamily: 'Inter, sans-serif',
+  headings: {
+    fontFamily: 'Inter, sans-serif',
+  },
+});
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <MantineProvider defaultColorScheme="auto">
+    <MantineProvider theme={theme} defaultColorScheme="auto">
       <App />
     </MantineProvider>
   </StrictMode>

src/styles/index.css

@@ -1,4 +1,7 @@
 @import '@mantine/core/styles.css';
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/600.css';
 
 /* Custom scrollbars */
 ::-webkit-scrollbar {

yarn.lock

@@ -722,6 +722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/inter@npm:^5.2.7":
+  version: 5.2.7
+  resolution: "@fontsource/inter@npm:5.2.7"
+  checksum: 10c0/e85d098c2955e847a1929bd80e936af490d97fc43e7896f88915fac62649d7803119532b88108304f66350477cc11dbdf9ab2a9b78f7f9aeb283d1762854079d
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -3638,6 +3645,7 @@ __metadata:
   resolution: "gerbil@workspace:."
   dependencies:
     "@eslint/js": "npm:^9.35.0"
+    "@fontsource/inter": "npm:^5.2.7"
     "@mantine/core": "npm:^8.3.1"
     "@mantine/hooks": "npm:^8.3.1"
     "@types/node": "npm:^24.3.3"