diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index b1ef0318..59758f16 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -2,6 +2,7 @@
 // https://tailwindcss.com/docs/configuration
 
 const plugin = require("tailwindcss/plugin")
+const defaultTheme = require('tailwindcss/defaultTheme')
 const fs = require("fs")
 const path = require("path")
 
@@ -15,7 +16,10 @@ module.exports = {
     extend: {
       colors: {
         brand: "#D4AF37",
-      }
+      },
+      fontFamily: {
+        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [
diff --git a/lib/music_library_web/components/layouts/root.html.heex b/lib/music_library_web/components/layouts/root.html.heex
index 981cc2cb..74c2422b 100644
--- a/lib/music_library_web/components/layouts/root.html.heex
+++ b/lib/music_library_web/components/layouts/root.html.heex
@@ -7,6 +7,7 @@
     <.live_title suffix=" · Phoenix Framework">
       <%= assigns[:page_title] || "MusicLibrary" %>
     </.live_title>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>