Use variable font instead

app/root.tsx

@@ -7,7 +7,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { ClientStyleContext, ServerStyleContext } from "./context.js";
-import fontStyle from "@fontsource/plus-jakarta-sans/index.css";
+import fontStyle from "@fontsource-variable/plus-jakarta-sans/index.css";
 import Forbidden from "../components/Forbidden.js";
 import globalStyles from "../index.css";
 import {

package.json

@@ -12,10 +12,10 @@
     "@chakra-ui/react": "^2.10.4",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@fontsource/plus-jakarta-sans": "^5.1.0",
-    "@remix-run/cloudflare": "^2.15.0",
-    "@remix-run/cloudflare-pages": "^2.15.0",
-    "@remix-run/react": "^2.15.0",
+    "@fontsource-variable/plus-jakarta-sans": "^5.1.0",
+    "@remix-run/cloudflare": "^2.15.1",
+    "@remix-run/cloudflare-pages": "^2.15.1",
+    "@remix-run/react": "^2.15.1",
     "@sentry/react": "^8.42.0",
     "aws4fetch": "^1.0.20",
     "dayjs": "^1.11.13",
@@ -25,7 +25,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.15.0",
+    "@remix-run/dev": "^2.15.1",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-big-calendar": "^1.16.0",

theme.ts

@@ -1,7 +1,7 @@
 import { extendTheme } from "@chakra-ui/react";
 
 const fontString =
-  '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;';
+  '"Plus Jakarta Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;';
 
 export default extendTheme({
   config: {