diff --git a/template/index.html b/template/index.html
index 9109ce3..0335b71 100644
--- a/template/index.html
+++ b/template/index.html
@@ -187,10 +187,16 @@
                             </label>
                         </div>
                         <div class="mt-2">
-                            <label class="selectgroup" v-for="font in ['', 'serif', 'sans-serif']">
-                                <input type="radio" name="feedToAdd" :value="font" v-model="font">
+                            <label class="selectgroup">
+                                <input type="radio" name="font" value="" v-model="font">
                                 <div class="selectgroup-label appearance-option">
-                                    <div :style="{'font-family': font}">{{ font || 'System' }}</div>
+                                    System Default
+                                </div>
+                            </label>
+                            <label class="selectgroup" v-for="f in $fonts()" :key="font">
+                                <input type="radio" name="font" :value="f" v-model="font">
+                                <div class="selectgroup-label appearance-option":style="{'font-family': f}">
+                                    {{ f }}
                                 </div>
                             </label>
                         </div>
@@ -208,7 +214,7 @@
                     <time>{{ formatDate(itemSelectedDetails.date) }}</time>
                 </div>
                 <hr>
-                <div class="content">
+                <div class="content" :style="{'font-family': font,}">
                     <div v-html="$sanitize(itemSelectedReadability)" v-if="itemSelectedReadability"></div>
                     <div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></div>
                     <div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index 6b7a3a4..f3cbd77 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -2,6 +2,38 @@
 
 var TITLE = document.title
 
+var FONTS = [
+  "Arial",
+  "Courier New",
+  "Georgia",
+  "Helvetica Neue",
+  "Segoe UI",
+  "Tahoma",
+  "Times New Roman",
+  "Verdana",
+]
+
+// adapted from https://github.com/darkwing/FontChecker
+function fontAvailable(desiredFont) {
+  var element = document.createElement('span')
+  element.style.setProperty('position', 'absolute')
+  element.style.setProperty('top', '-10')
+  element.style.setProperty('right', '-10')
+  element.style.setProperty('font-family', '__RUBBISH_FONT__')
+  element.innerHTML = 'abcdefghijklmnopqrstuvwxyz'
+  document.body.appendChild(element)
+  var width = element.offsetWidth;
+  element.style.setProperty('font-family', desiredFont);
+  var new_width = element.offsetWidth;
+  console.log(desiredFont, width !== new_width)
+  element.remove();
+  return (width !== new_width);
+}
+
+Vue.prototype.$fonts = function() {
+  return FONTS.filter(fontAvailable)
+}
+
 DOMPurify.addHook('afterSanitizeAttributes', function (node) {
   // set all elements owning target to target=_blank
   if ('target' in node) {
@@ -136,7 +168,7 @@ var vm = new Vue({
         'items': false,
       },
       'feedStats': {},
-      'font': 'sans-serif',
+      'font': '',
       'theme': 'light',
     }
   },