Adjusting fonts and dependencies (#23)

.eslintrc.cjs

@@ -2,19 +2,19 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  plugins: ['svelte4', '@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  overrides: [{ files: ['*.svelte'], processor: 'svelte4/svelte4' }],
   settings: {
-    'svelte3/typescript': () => require('typescript')
+    'svelte4/typescript': () => require('typescript'),
   },
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   env: {
     browser: true,
     es2017: true,
-    node: true
-  }
+    node: true,
+  },
 };

package.json

@@ -10,7 +10,6 @@
     "vercel-build": "prisma generate && yarn build",
     "coverage": "vitest run --coverage",
     "test": "vitest run",
-    "test": "vitest run",
     "lint": "prettier --plugin-search-dir . --check . && eslint ."
   },
   "devDependencies": {
@@ -19,11 +18,8 @@
     "@sveltejs/kit": "1.20.5",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
-    "@unocss/preset-icons": "^0.53.3",
     "@unocss/preset-rem-to-px": "^0.53.3",
-    "@unocss/preset-typography": "^0.53.3",
     "@unocss/reset": "^0.53.3",
-    "@unocss/transformer-variant-group": "^0.53.3",
     "@vitest/coverage-istanbul": "^0.32.2",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
@@ -46,8 +42,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@fontsource/montserrat": "^5.0.3",
-    "@fontsource/open-sans": "^5.0.3",
     "@prisma/client": "^4.16.1",
     "notie": "^4.3.1"
   }

src/routes/+layout.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
   import 'uno.css';
   import '@unocss/reset/tailwind.css';
-  import '@fontsource/open-sans/latin-400.css';
-  import '@fontsource/open-sans/latin-600.css';
-  import '@fontsource/montserrat/latin-400.css';
-  import '@fontsource/montserrat/latin-600.css';
 
   import { PUBLIC_UMAMI_WEBSITE_ID, PUBLIC_UMAMI_URL } from '$env/static/public';
   import TopNavigation from '$lib/components/TopNavigation.svelte';
@@ -21,7 +17,7 @@
   ></script>
 </svelte:head>
 
-<div class="w-full flex-auto flex flex-col min-h-full dark:bg-mauveOne dark:text-mauveTwelve">
+<div class="w-full flex-auto flex flex-col font-sans min-h-full dark:bg-mauveOne dark:text-mauveTwelve">
   <TopNavigation />
   <main class="w-full max-w-full md:max-w-screen-lg mx-auto flex flex-col mt-10 md:mt-20 p-4 md:p-0">
     <slot />
@@ -30,10 +26,6 @@
 </div>
 
 <style global>
-  html {
-    font-family: 'Open Sans', sans-serif;
-  }
-
   html,
   body,
   #svelte {

uno.config.ts

@@ -1,4 +1,4 @@
-import { transformerVariantGroup, presetTypography, presetUno, presetIcons } from 'unocss';
+import { transformerVariantGroup, presetTypography, presetUno, presetIcons, presetWebFonts } from 'unocss';
 import { defineConfig } from 'unocss/vite';
 import presetRemToPx from '@unocss/preset-rem-to-px';
 
@@ -41,6 +41,13 @@ export default defineConfig({
         rdi: () => import('@iconify-json/radix-icons/icons.json').then(i => i.default),
       },
     }),
+    presetWebFonts({
+      provider: 'bunny',
+      fonts: {
+        sans: ['Open Sans:400,500,600'],
+        heading: ['Montserrat:400,500,600,700', 'sans-serif'],
+      },
+    }),
     presetTypography({
       cssExtend: {
         a: {
@@ -107,10 +114,6 @@ export default defineConfig({
     ],
   ],
   theme: {
-    fontFamily: {
-      sans: '"Open Sans", sans-serif',
-      heading: 'Montserrat, sans-serif',
-    },
     colors: {
       mauveOne: mauveDark.mauve1,
       mauveTwo: mauveDark.mauve2,