diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs
index a190ae5..9345403 100644
--- a/src/Roux/Html.hs
+++ b/src/Roux/Html.hs
@@ -79,16 +79,18 @@ page title content =
                 H.style $
                     H.toHtml $
                         T.unlines
-                            [ "@import url('https://fonts.googleapis.com/css2?family=Pompiere&display=swap');"
+                            [ "@import url('https://fonts.googleapis.com/css2?family=Pompiere&family=Quicksand:wght@300..700&display=swap');"
                             , ""
                             , ":root { --roux-bg: #F5EFE0; --roux-text: #3D2C1E; --roux-accent: #B85C38; }"
-                            , ".pompiere-regular { font-family: \"Pompiere\", sans-serif; font-weight: 400; font-style: normal; }"
+                            , ".pompiere { font-family: \"Pompiere\", cursive; font-weight: 400; font-style: normal; }"
+                            , ".quicksand { font-family: \"Quicksand\", sans-serif; font-optical-sizing: auto; font-style: normal; }"
                             , ""
-                            , "body { background: var(--roux-bg); color: var(--roux-text); font-family: \"Pompiere\", serif; }"
+                            , "body { background: var(--roux-bg); color: var(--roux-text); font-family: \"Quicksand\", sans-serif; }"
                             , "main.container { padding-top: 1.5rem; }"
-                            , "h1 { font-family: \"Pompiere\", serif; font-size: 2rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.15; color: var(--roux-text); }"
-                            , "h2 { font-size: 0.75rem; font-weight: 500; margin: 0 0 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--roux-accent); }"
-                            , "h3 { font-family: \"Pompiere\", serif; font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.5rem; color: var(--roux-text); text-transform: uppercase; opacity: 0.75; }"
+                            , "h1, h3 { font-family: \"Pompiere\", cursive; }"
+                            , "h1 { font-size: 2rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.15; color: var(--roux-text); }"
+                            , "h2 { font-family: \"Quicksand\", sans-serif; font-size: 0.7rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--roux-accent); }"
+                            , "h3 { font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.5rem; color: var(--roux-text); text-transform: uppercase; opacity: 0.75; }"
                             , "a { color: var(--roux-accent); text-decoration: none; }"
                             , "a:hover { text-decoration: underline; }"
                             , "a[role=button] { --pico-color: var(--roux-accent); }"