diff --git a/template/index.html b/template/index.html
index 0335b71..2aee0ed 100644
--- a/template/index.html
+++ b/template/index.html
@@ -174,35 +174,37 @@
                     <div class="p-1" style="width: 200px;">
                         <div class="d-flex">
                             <label class="themepicker">
-                                <input type="radio" name="settingsFont" value="light" v-model="theme">
+                                <input type="radio" name="settingsTheme" value="light" v-model="settings.theme">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                             <label class="themepicker">
-                                <input type="radio" name="settingsFont" value="sepia" v-model="theme">
+                                <input type="radio" name="settingsTheme" value="sepia" v-model="settings.theme">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                             <label class="themepicker">
-                                <input type="radio" name="settingsFont" value="night" v-model="theme">
+                                <input type="radio" name="settingsTheme" value="night" v-model="settings.theme">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                         </div>
                         <div class="mt-2">
                             <label class="selectgroup">
-                                <input type="radio" name="font" value="" v-model="font">
+                                <input type="radio" name="font" value="" v-model="settings.font">
                                 <div class="selectgroup-label appearance-option">
                                     System Default
                                 </div>
                             </label>
-                            <label class="selectgroup" v-for="f in $fonts()" :key="font">
-                                <input type="radio" name="font" :value="f" v-model="font">
+                            <label class="selectgroup" v-for="f in availableFonts" :key="f">
+                                <input type="radio" name="font" :value="f" v-model="settings.font">
                                 <div class="selectgroup-label appearance-option":style="{'font-family': f}">
                                     {{ f }}
                                 </div>
                             </label>
                         </div>
                         <div class="btn-group d-flex mt-2">
-                            <button class="btn btn-outline appearance-option" style="font-size: 0.8rem">A</button>
-                            <button class="btn btn-outline appearance-option" style="font-size: 1.2rem">A</button>
+                            <button class="btn btn-outline appearance-option"
+                                    style="font-size: 0.8rem" @click="incrFont(-1)">A</button>
+                            <button class="btn btn-outline appearance-option"
+                                    style="font-size: 1.2rem" @click="incrFont(1)">A</button>
                         </div>
                     </div>
                 </b-popover>
@@ -214,7 +216,7 @@
                     <time>{{ formatDate(itemSelectedDetails.date) }}</time>
                 </div>
                 <hr>
-                <div class="content" :style="{'font-family': font,}">
+                <div class="content" :style="{'font-family': settings.font, 'font-size': settings.size + 'rem'}">
                     <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 f3cbd77..35656b4 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -25,15 +25,10 @@ function fontAvailable(desiredFont) {
   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) {
@@ -167,9 +162,13 @@ var vm = new Vue({
         'newfeed': false,
         'items': false,
       },
+      'availableFonts': FONTS.filter(fontAvailable),
       'feedStats': {},
-      'font': '',
-      'theme': 'light',
+      'settings': {
+        'font': '',
+        'theme': 'light',
+        'size': 1.0,
+      },
     }
   },
   computed: {
@@ -489,5 +488,9 @@ var vm = new Vue({
       this.feedNewChoice = []
       this.feedNewChoiceSelected = ''
     },
+    incrFont: function(x) {
+      console.log(x, this.settings.size)
+      this.settings.size = +(this.settings.size + (0.1 * x)).toFixed(1)
+    }
   }
 })