diff --git a/src/diffenator2/templates/_base.html b/src/diffenator2/templates/_base.html
index 96f9ee2..631f7e1 100644
--- a/src/diffenator2/templates/_base.html
+++ b/src/diffenator2/templates/_base.html
@@ -163,6 +163,14 @@
 	    {{ font_class.render() }}
 	  {% endfor %}
 	{% endblock %}
+
+	   #ot-panel {
+		max-height: 400px;
+		overflow-y: scroll;
+		background: white;
+		padding: 10px;
+		display: none;
+	   }
     </style>
 </head>
 <body>
@@ -170,6 +178,9 @@
 		{% if include_ui %}
 			<div class="nav-item" id="font-toggle">old</div>
 		{% endif %}
+			<div class="nav-item" id="ot-button">OT features</div>
+			<div id="ot-panel">
+			</div>
 		{% block nav %}{% endblock %}
 	</div>
     <div id="content">
@@ -211,6 +222,81 @@ <h2>{% block content_name %}{% endblock %}</h2>
 		fontToggle.addEventListener("click", switchFonts);
 	}
 
+// apply optional ot feats
+
+function buildFeatureList() {
+	var features = [
+		'c2sc', 'calt', 'case', 'cpsp', 'dlig', 'dnom',
+		'frac', 'kern', 'liga', 'lnum', 'numr', 'onum',
+		'ordn', 'pnum', 'salt', 'sinf', 'smcp', 'sups',
+		'swsh', 'titl', 'tnum', 'zero', 'ss01', 'ss02',
+		'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08',
+		'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");
+		item.type = "checkbox"
+		item.value = feat
+		item.classList.add("ot-checkbox")
+		var label = document.createElement("label")
+		label.textContent = feat
+
+		row.appendChild(item)
+		row.appendChild(label)
+
+		otPanel.appendChild(row)
+	}
+}
+
+buildFeatureList()
+
+
+function enableFeatures() {
+	var checkboxes = document.getElementsByClassName("ot-checkbox")
+	var res = []
+	var disableKerning = false
+	for (i=0; i<checkboxes.length; i++) {
+		if (checkboxes[i].checked === true) {
+			var checkbox = checkboxes[i]
+			res.push('"' + checkbox.value + '"')
+
+			if (checkbox.value === "kern") {
+				disableKerning = true
+			}
+		}
+	}	
+
+	var boxText = document.getElementsByClassName("box-text")
+	var otString = res.join(", ")
+	for (j=0; j<boxText.length; j++) {
+		boxText[j].style.fontFeatureSettings = otString
+		if (disableKerning === true) {
+			boxText[j].style.fontKerning = "none"
+		}
+	}
+}
+
+var otButton = document.getElementById("ot-button")
+otButton.addEventListener("click", function() {
+    otPanel = document.getElementById("ot-panel")
+    if (otPanel.style.display !== "block") {
+        otPanel.style.display = "block"
+    } else {
+        otPanel.style.display = "none"
+    }
+})
+var checkboxes = document.getElementsByClassName("ot-checkbox")
+for (i=0; i<checkboxes.length; i++) {
+	cb = checkboxes[i]
+	cb.addEventListener("click", enableFeatures)
+}	
     {% block js %}
 	{% endblock %}
 
diff --git a/src/diffenator2/templates/diffbrowsers_waterfall.html b/src/diffenator2/templates/diffbrowsers_waterfall.html
index 6159bb6..88ba0e9 100644
--- a/src/diffenator2/templates/diffbrowsers_waterfall.html
+++ b/src/diffenator2/templates/diffbrowsers_waterfall.html
@@ -9,7 +9,7 @@
     {% for pt_size in [7, 10, 11, 12, 14, 16, 18, 21, 27, 32] %}
       <div class="box">
         <div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
-        <div class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
+        <div contenteditable=true spellcheck="false" class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
             QUICK WAFTING ZEPHYRS VEX BOLD JIM.<br>
             quick wafting zephyrs vex bold jim.<br>
             $14.95<br>
