diff --git a/_config.yml b/_config.yml
index 7acc58f..074a761 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,6 +7,8 @@ repository: nntrn/what-im-reading
 github_username: nntrn
 favicon_ico: /assets/favicon.ico
 theme_color: "#34e045"
+font_family: serif
+fonts: ["monospace", "serif", "sans-serif"]
 
 kramdown:
   smart_quotes: ["apos", "apos", "quot", "quot"]
diff --git a/_layouts/default.html b/_layouts/default.html
index 4c7cac6..53ce4a6 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -28,7 +28,7 @@
   <link rel="stylesheet" href="{{'/assets/vendor/bootstrap.css'|relative_url}}">
   <link rel="stylesheet" href="{{'/assets/minimal.css'|relative_url}}">
 </head>
-<body>
+<body data-layout="{{site.font_family}}">
 <div class="container">
   <header class="mt-2 mb-4">
     <h1 class="site-title my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
@@ -50,9 +50,9 @@ <h1 class="site-title my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title
       </div>
       <div class="align-content-center align-items-center">
         <select class="form-select form-select-sm" id="theme" onclick="setTheme(this.value)">
-        <option name="serif" value="serif" default>serif</option>
-        <option name="monospace" value="monospace">monospace</option>
-        <option name="sans-serif" value="sans-serif">sans-serif</option>
+        {%- for font in site.fonts %}
+        <option name="{{font}}" value="{{font}}"{%- if site.font_family == font %} selected{%- endif -%}>{{font}}</option>
+        {%- endfor %}
         </select>
       </div>
     </div>
