diff --git a/src/assets/index.html b/src/assets/index.html
index a213de2..46bf240 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -226,10 +226,9 @@
                         </button>
                     </div>
 
-                    <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">System Default</button>
-                    <button class="dropdown-item" :class="{active: theme.font == f}" v-for="f in fonts" :key="f" @click.stop="theme.font = f">
-                        {{ f }}
-                    </button>
+                    <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">sans-serif</button>
+                    <button class="dropdown-item font-serif" :class="{active: theme.font == 'serif'}" @click.stop="theme.font = 'serif'">serif</button>
+                    <button class="dropdown-item font-monospace" :class="{active: theme.font == 'monospace'}" @click.stop="theme.font = 'monospace'">monospace</button>
 
                     <div class="d-flex text-center">
                         <button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
@@ -253,7 +252,8 @@
             <div v-if="itemSelectedDetails"
                  ref="content"
                  class="content px-4 pt-3 pb-5 border-top overflow-auto"
-                 :style="{'font-family': theme.font, 'font-size': theme.size + 'rem'}">
+                 :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
+                 :style="{'font-size': theme.size + 'rem'}">
                 <h1><b>{{ itemSelectedDetails.title || 'untitled' }}</b></h1>
                 <div class="text-muted">
                     <div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
diff --git a/src/assets/javascripts/app.js b/src/assets/javascripts/app.js
index 63f2b22..5bfd233 100644
--- a/src/assets/javascripts/app.js
+++ b/src/assets/javascripts/app.js
@@ -2,14 +2,6 @@
 
 var TITLE = document.title
 
-var FONTS = [
-  "Arial",
-  "Courier New",
-  "Georgia",
-  "Times New Roman",
-  "Verdana",
-]
-
 var debounce = function(callback, wait) {
   var timeout
   return function() {
@@ -227,7 +219,7 @@ var vm = new Vue({
         'items': false,
         'readability': false,
       },
-      'fonts': FONTS,
+      'fonts': ['', 'serif', 'monospace'],
       'feedStats': {},
       'theme': {
         'name': s.theme_name,
diff --git a/src/assets/stylesheets/app.css b/src/assets/stylesheets/app.css
index 27bb1ee..277d001 100644
--- a/src/assets/stylesheets/app.css
+++ b/src/assets/stylesheets/app.css
@@ -93,6 +93,14 @@ select.form-control:not([multiple]):not([size]) {
 
 /* custom elements */
 
+.font-serif {
+  font-family: Georgia, serif;
+}
+
+.font-monospace {
+  font-family: SFMono-Regular, Menlo, Consolas, monospace;
+}
+
 .icon {
   height: 1rem;
   width: 1rem;