diff --git a/src/diffenator2/templates/_base.html b/src/diffenator2/templates/_base.html
index 693e908..7d3d4d7 100644
--- a/src/diffenator2/templates/_base.html
+++ b/src/diffenator2/templates/_base.html
@@ -31,7 +31,7 @@
 	}
 	.box-text{
 	}
-	
+
 	#nav{
 	  position: fixed;
 	  right: 20px;
@@ -42,7 +42,7 @@
 	.nav-item{
 		display: block;
 		cursor: pointer;
-		-webkit-user-select: none; /* Safari */        
+		-webkit-user-select: none; /* Safari */
 		-moz-user-select: none; /* Firefox */
 			-ms-user-select: none; /* IE10+/Edge */
 		user-select: none; /* Standard */
@@ -193,10 +193,19 @@ <h2>{% block content_name %}{% endblock %}</h2>
 
 	POSITION = "old"
 	fontToggle = document.getElementById("font-toggle")
-	function switchFonts() {
+
+    const autoSwitch = null;
+
+	function switchFonts(isClickEvent) {
+
+    // when a click triggers the action stop autoSwitching
+    if (isClickEvent && autoSwitch) {
+        clearInterval(autoSwitch);
+    }
+
 	boxTitles = document.getElementsByClassName("box-title")
 	items = document.getElementsByClassName("box-text");
-	  
+
 	if (POSITION === "old") {
 	  POSITION = "new"
 	  for (item of boxTitles) {
@@ -234,11 +243,11 @@ <h2>{% block content_name %}{% endblock %}</h2>
 		'ss09', 'ss10', 'ss11', 'ss12', 'ss13', 'ss14',
 		'ss15', 'ss16', 'ss17', 'ss18', 'ss19', 'ss20'
 	]
-	
+
 	var otPanel = document.getElementById("ot-panel")
 	for (i=0; i<features.length; i++) {
 		var feat = features[i]
-		
+
 		var row = document.createElement("div");
 
 		var item = document.createElement("input");
@@ -271,7 +280,7 @@ <h2>{% block content_name %}{% endblock %}</h2>
 				disableKerning = true
 			}
 		}
-	}	
+	}
 
 	var boxText = document.getElementsByClassName("box-text")
 	var otString = res.join(", ")
@@ -296,7 +305,7 @@ <h2>{% block content_name %}{% endblock %}</h2>
 for (i=0; i<checkboxes.length; i++) {
 	cb = checkboxes[i]
 	cb.addEventListener("click", enableFeatures)
-}	
+}
     {% block js %}
 	{% endblock %}
 
diff --git a/src/diffenator2/templates/diffbrowsers_proofer.html b/src/diffenator2/templates/diffbrowsers_proofer.html
index 484e992..934786e 100644
--- a/src/diffenator2/templates/diffbrowsers_proofer.html
+++ b/src/diffenator2/templates/diffbrowsers_proofer.html
@@ -69,7 +69,7 @@ <h3>Glyphset: {{ glyph_set }}</h3>
     {% endfor %}
     </div>
 
-    
+
 
 <div id="font-by-font" style="display: none;">
 {% for glyph_set, section in test_strings.items() %}
@@ -86,7 +86,7 @@ <h3>Glyphset: {{ glyph_set }}</h3>
             </div>
         {% endfor %}
     {% endfor %}
-{% endfor %} 
+{% endfor %}
 </div>
 
 
@@ -108,13 +108,13 @@ <h3>Glyphset: {{ glyph_set }}</h3>
             {% endfor %}
         </div>
     {% endfor %}
-{% endfor %} 
+{% endfor %}
 </div>
 
 
 {% endblock %}
 {% block js %}
-    
+
 state = "line-by-line"
 function viewMode() {
     var viewButton = document.getElementById("view-button")
@@ -140,7 +140,7 @@ <h3>Glyphset: {{ glyph_set }}</h3>
     }
 }
 document.getElementById("view-button").addEventListener("click", viewMode)
-    
+
     var ptSelector = document.getElementById("pt-selector");
     ptSelector.addEventListener("change", function(e) {
         var newPtSize = e.target.value
@@ -266,7 +266,7 @@ <h3>Glyphset: {{ glyph_set }}</h3>
     var width = longestLine()
     var container = document.getElementById("side-by-side")
     var subContainers = container.getElementsByClassName("box-side-by-side")
-    
+
     var containerWidth = (width * subContainers.length) + 100
     container.style.width = containerWidth + "pt"
 
@@ -277,5 +277,9 @@ <h3>Glyphset: {{ glyph_set }}</h3>
     }
 }
 
+autoSwitch = setInterval(function () {
+    switchFonts();
+}, 1250);
+
 
 {% endblock %}
\ No newline at end of file