font

src/App.tsx

@@ -5,6 +5,7 @@ import {
   // useLoaderData,
 } from "react-router-dom";
 
+import { CustomFonts } from './CustomFonts';
 import { KartaPage } from "./KartaPage";
 // import { Landing } from "./Landing";
 import { Article } from "./Article";
@@ -35,7 +36,10 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <MantineProvider>
+    <MantineProvider theme={{
+      fontFamily: 'Akrobat, Greycliff CF, Roboto, sans-serif'
+    }}>
+      <CustomFonts />
       <Box pos={"absolute"} w={"100%"} top={0}>
         <HeaderSimple links={headerLinks.links} />
         <RouterProvider router={router} />

src/CustomFonts.tsx

@@ -0,0 +1,28 @@
+import { Global } from '@mantine/core';
+import regular from './assets/Akrobat-Regular.woff2';
+import bold from './assets/Akrobat-Bold.woff2';
+
+export function CustomFonts() {
+  return (
+    <Global
+      styles={[
+        {
+          '@font-face': {
+            fontFamily: 'Akrobat',
+            src: `url('${bold}') format("woff2")`,
+            fontWeight: 700,
+            fontStyle: 'normal',
+          },
+        },
+        {
+          '@font-face': {
+            fontFamily: 'Akrobat',
+            src: `url('${regular}') format("woff2")`,
+            fontWeight: 400,
+            fontStyle: 'normal',
+          },
+        },
+      ]}
+    />
+  );
+}

src/Header.tsx

@@ -44,8 +44,8 @@ const useStyles = createStyles((theme) => ({
       theme.colorScheme === "dark"
         ? theme.colors.dark[0]
         : theme.colors.gray[7],
-    fontSize: theme.fontSizes.sm,
+    fontSize: theme.fontSizes.md,
-    fontWeight: 500,
+    fontWeight: 700,
 
     "&:hover": {
       backgroundColor: theme.colors.gray[0],