diff --git a/package-lock.json b/package-lock.json
index a3c3244a3b8efed7d841970ce4d512564ba14881..36897f63c2f3be0c3359e8fe659e92aaaa4ef1fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "devDependencies": {
         "@auditors/core": "^0.1.7",
         "@babel/core": "^7.13.14",
+        "@fontsource/lato": "^4.3.0",
+        "@fontsource/lora": "^4.3.0",
         "@storybook/addon-actions": "^6.2.3",
         "@storybook/addon-essentials": "^6.2.3",
         "@storybook/addon-links": "^6.2.3",
@@ -1706,6 +1708,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fontsource/lato": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.3.0.tgz",
+      "integrity": "sha512-/qm5j4mEjaOSOl7OI8Q2tzt/QDzDMYNDhSvJPiFqY/ClxYGtqt1nBW5DRHiZOirI/IWl0tX3adoILOBMz/cRWA==",
+      "dev": true
+    },
+    "node_modules/@fontsource/lora": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/lora/-/lora-4.3.0.tgz",
+      "integrity": "sha512-LTjsnuxO3gLw0GmevbXO3ZqB7sof42DH93EZfaBVaIXx4MGpUsJyXgaSK+YQiWZIZfoP2dn6r1HB/1NGApoSKQ==",
+      "dev": true
+    },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -21721,6 +21735,18 @@
         }
       }
     },
+    "@fontsource/lato": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.3.0.tgz",
+      "integrity": "sha512-/qm5j4mEjaOSOl7OI8Q2tzt/QDzDMYNDhSvJPiFqY/ClxYGtqt1nBW5DRHiZOirI/IWl0tX3adoILOBMz/cRWA==",
+      "dev": true
+    },
+    "@fontsource/lora": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/lora/-/lora-4.3.0.tgz",
+      "integrity": "sha512-LTjsnuxO3gLw0GmevbXO3ZqB7sof42DH93EZfaBVaIXx4MGpUsJyXgaSK+YQiWZIZfoP2dn6r1HB/1NGApoSKQ==",
+      "dev": true
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
diff --git a/package.json b/package.json
index d9efe7fdd5008dec0d844de8ff546483794427dc..364a17097cc25ce759d898a56caaaf7c650cce5e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
   "devDependencies": {
     "@auditors/core": "^0.1.7",
     "@babel/core": "^7.13.14",
+    "@fontsource/lato": "^4.3.0",
+    "@fontsource/lora": "^4.3.0",
     "@storybook/addon-actions": "^6.2.3",
     "@storybook/addon-essentials": "^6.2.3",
     "@storybook/addon-links": "^6.2.3",
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index ceaea0e60903137d113abaec02681afbc4c416c0..40d5c022ae8a232b6e08efdadea3a744015bab55 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,4 +1,7 @@
 <script>
+  import "@fontsource/lato/index.css"
+  import "@fontsource/lora/index.css"
+
   import "../global.css"
 
   import { setContext } from "svelte"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2d8f466ba3d790cfca9f3327004cb2ca9d3971da..a0152c02cdd6de348d3de143b84aa10b727ea684 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -19,6 +19,10 @@ module.exports = {
   },
   theme: {
     extend: {},
+    fontFamily: {
+      sans: ["Lato", "sans-serif"],
+      serif: ["Lora", "serif"],
+    },
   },
   variants: {
     extend: {},