diff --git a/package.json b/package.json
index fb61faf..c10cad5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "deploy:netlify": "netlify deploy --prod -d 'public' -s 'blink.bauke.xyz'"
   },
   "dependencies": {
+    "@fontsource/inter": "^4.5.1",
     "htm": "^3.1.0",
     "modern-normalize": "^1.1.0",
     "preact": "^10.6.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7875ba1..5667d91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@fontsource/inter': ^4.5.1
   '@types/node': ^17.0.5
   htm: ^3.1.0
   modern-normalize: ^1.1.0
@@ -15,6 +16,7 @@ specifiers:
   xo: ^0.47.0
 
 dependencies:
+  '@fontsource/inter': 4.5.1
   htm: 3.1.0
   modern-normalize: 1.1.0
   preact: 10.6.4
@@ -258,6 +260,10 @@ packages:
       - supports-color
     dev: true
 
+  /@fontsource/inter/4.5.1:
+    resolution: {integrity: sha512-mvtOvXNNVLlF1p/UbLgLrmz2RCOl6Ow+TqyiK10SosoLKX7edsXYiHFHb7XIZdjII6F2sJVPPsJXWhBnbXT2DQ==}
+    dev: false
+
   /@humanwhocodes/config-array/0.9.2:
     resolution: {integrity: sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==}
     engines: {node: '>=10.10.0'}
diff --git a/source/scss/_common.scss b/source/scss/_common.scss
index 43caff9..25f943e 100644
--- a/source/scss/_common.scss
+++ b/source/scss/_common.scss
@@ -5,6 +5,7 @@ html {
 body {
   background-color: var(--background-1);
   color: var(--foreground-1);
+  font-family: Inter, sans-serif;
   font-size: 2rem;
 }
 
diff --git a/source/ts/single-page-application.ts b/source/ts/single-page-application.ts
index 481f5c4..7b108b9 100644
--- a/source/ts/single-page-application.ts
+++ b/source/ts/single-page-application.ts
@@ -1,6 +1,8 @@
 // Uncomment when debugging and using Preact's DevTools WebExtension.
 // import 'preact/debug';
 
+import '@fontsource/inter/latin.css';
+
 import {html, render} from 'htm/preact';
 import {Router} from 'preact-router';