diff --git a/docs/_static/custom.css b/docs/_static/custom.css
new file mode 100644
index 00000000..72083fee
--- /dev/null
+++ b/docs/_static/custom.css
@@ -0,0 +1,10 @@
+@import url('https://rsms.me/inter/inter.css');
+@import url('https://assets.hynek.me/css/bm.css');
+
+
+:root {
+  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
+}
+@supports (font-variation-settings: normal) {
+  :root { font-family: InterVariable, sans-serif; }
+}
diff --git a/docs/conf.py b/docs/conf.py
index d93a70dc..b92354a6 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -98,7 +98,13 @@ html_theme_options = {
     "light_logo": "attrs_logo.svg",
     "dark_logo": "attrs_logo_white.svg",
     "top_of_page_button": None,
+    "light_css_variables": {
+        "font-stack": "Inter,sans-serif",
+        "font-stack--monospace": "BerkeleyMono, MonoLisa, ui-monospace, "
+        "SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace",
+    },
 }
+html_css_files = ["custom.css"]
 
 
 # The name of an image file (within the static path) to use as favicon of the