diff --git a/index.css b/index.css
index 004c98c..ca99a99 100644
--- a/index.css
+++ b/index.css
@@ -36,6 +36,10 @@ a:active {
 	text-decoration: none;
 	color: inherit;
 }
+.no-smooth {
+	font-smooth: never;
+	-webkit-font-smoothing: none;
+}
 .octicon {
 	fill: currentColor;
 }
@@ -56,25 +60,31 @@ article {
 	width: 100%;
 }
 section {
-	flex: 1;
+	flex: 0;
 	flex-shrink: 0;
 }
+section#filters,
 section.config {
 	font-size: 10px;
 	background: #eee;
-	flex: 0;
 	padding: 10px;
 	display: grid;
 	grid-column-gap: 5px;
 	grid-row-gap: 5px;
 	grid-template-columns: auto auto auto auto;
 }
+
+section#filters {
+	grid-template-columns: auto auto auto auto auto;
+}
+
 section.config > * {
 	text-align: center;
 	padding: 0;
 	white-space: nowrap;
 }
 section.select-list {
+	flex: 1;
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -89,6 +99,9 @@ section.select-list .entry {
 section.select-list .entry:hover {
 	background: #fff;
 }
+section.select-list .entry.filtered-out {
+	display: none;
+}
 section.select-list a[data-value] {
 	display: block;
 	position: relative;
@@ -158,7 +171,6 @@ section.select-list .details {
 	text-overflow: ellipsis;
 }
 footer {
-	flex: 0;
 	padding: 5px 10px;
 	font-size: 10px;
 	text-align: center;
@@ -205,11 +217,43 @@ input[type="number"] {
 	border-radius: 3px;
 	text-align: left;
 }
+fieldset {
+	all: unset;
+}
+button {
+	all: unset;
+	display: block;
+	margin: 0;
+	padding: 0 .5ex;
+	border: 1px solid #e4e4e4;
+	border-radius: 3px;
+	color: #777;
+	position: relative;
+	transition: top .2s ease-in-out;
+}
+button:active {
+	top: 1px;
+}
+
+.toggle {
+	display: flex;
+}
+.toggle button:first-child {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.toggle button:not(:first-child) {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+button:hover,
+button.selected,
 input[type="number"]:hover,
 input[type="number"]:focus,
 select:hover,
 select:focus {
 	border-color: #777;
+	background: #f5f5f5;
 }
 pre,
 textarea,
@@ -244,10 +288,6 @@ label[for="select-theme"] {
 	min-height: 100%;
 	text-rendering: optimizeLegibility;
 }
-.CodeMirror.no-smooth {
-	font-smooth: never;
-	-webkit-font-smoothing: none;
-}
 .CodeMirror .cm-atom {
 	font-style: italic;
 }
diff --git a/index.html b/index.html
index 0cd182e..550ce90 100755
--- a/index.html
+++ b/index.html
@@ -89,6 +89,29 @@
 
 	<div class="article-wrapper">
 		<article>
+			<section id="filters">
+				<fieldset class="toggle" data-group="style">
+					<button value="sans" style="font-family: Input Mono;">Sans</button>
+					<button value="serif" style="font-family: cutive;">Serif</button>
+				</fieldset>
+				<fieldset class="toggle" data-group="rendering">
+					<button value="vector" style="font-family: Input Mono;">Vector</button>
+					<button value="bitmap" style="font-family: fixedsys;" class="no-smooth">Bitmap</button>
+				</fieldset>
+				<fieldset class="toggle" data-group="liga">
+					<button value="no" style="font-family: Input Mono;">=></button>
+					<button value="yes" style="font-family: firacode;">=></button>
+				</fieldset>
+				<!-- <select id="authors-list">
+					<optgroup>
+						<option>All</option>
+					</optgroup>
+					<optgroup>
+						<optgroup>Other</optgroup>
+					</optgroup>
+				</select>
+				<input type="text"> -->
+			</section>
 			<section class="select-list" tabindex="0">
 				<div id="select-font">
 					<!-- filled from json -->
diff --git a/index.js b/index.js
index 1e58477..eb49516 100644
--- a/index.js
+++ b/index.js
@@ -14,6 +14,13 @@ var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
 var input = document.getElementById('select-theme');
 
 var font_data = {};
+var filters = {
+    'style': false,
+    'rendering': false,
+    'liga': false,
+    'author': false,
+    'name': false
+};
 
 function selectTheme() {
     var theme = 'monokai';
@@ -191,6 +198,92 @@ function decreaseFontSize() {
     sizeEl.onchange();
 }
 
+function applyFilters() {
+    var count = 0;
+    switch (filters.style) {
+    case 'sans':
+        $('[data-group="style"] [value="sans"]').addClass('selected');
+        $('[data-group="style"] [value="serif"]').removeClass('selected');
+        break;
+    case 'serif':
+        $('[data-group="style"] [value="sans"]').removeClass('selected');
+        $('[data-group="style"] [value="serif"]').addClass('selected');
+        break;
+    default:
+        $('[data-group="style"] [value="sans"]').removeClass('selected');
+        $('[data-group="style"] [value="serif"]').removeClass('selected');
+    }
+
+    switch (filters.rendering) {
+    case 'vector':
+        $('[data-group="rendering"] [value="vector"]').addClass('selected');
+        $('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
+        break;
+    case 'bitmap':
+        $('[data-group="rendering"] [value="vector"]').removeClass('selected');
+        $('[data-group="rendering"] [value="bitmap"]').addClass('selected');
+        break;
+    default:
+        $('[data-group="rendering"] [value="vector"]').removeClass('selected');
+        $('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
+    }
+
+    switch (filters.liga) {
+    case 'yes':
+        $('[data-group="liga"] [value="yes"]').addClass('selected');
+        $('[data-group="liga"] [value="no"]').removeClass('selected');
+        break;
+    case 'no':
+        $('[data-group="liga"] [value="yes"]').removeClass('selected');
+        $('[data-group="liga"] [value="no"]').addClass('selected');
+        break;
+    default:
+        $('[data-group="liga"] [value="yes"]').removeClass('selected');
+        $('[data-group="liga"] [value="no"]').removeClass('selected');
+    }
+
+    $('.entry[data-alias]').each(function(iteration, element) {
+        var data = font_data[$(element).data().alias];
+        if (
+            (!filters.style || data.style === filters.style) &&
+            (!filters.rendering || data.rendering === filters.rendering) &&
+            (!filters.liga || data.ligatures === false && filters.liga === 'no' || data.ligatures === true && filters.liga === 'yes')
+        ) {
+            $(element).removeClass('filtered-out');
+            count++;
+        } else {
+            $(element).addClass('filtered-out');
+        }
+    });
+
+    if (count === 1) {
+        $('h1 a').text(count + ' Programming Font');
+    } else {
+        $('h1 a').text(count + ' Programming Fonts');
+    }
+
+}
+
+function toggleFilter(value, group) {
+    function toggleValue(name, value) {
+        if (filters[name] == value) {
+            filters[name] = false;
+        } else {
+            filters[name] = value;
+        }
+    }
+
+    if (group === 'style') {
+        toggleValue('style', value);
+    } else if (group === 'rendering') {
+        toggleValue('rendering', value);
+    } else if (group === 'liga') {
+        toggleValue('liga', value);
+    }
+
+    applyFilters();
+}
+
 $(document).ready(function() {
     var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, '$1');
     var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, '$1');
@@ -226,6 +319,14 @@ $(document).ready(function() {
         selectTheme();
     });
 
+    $('#filters button').on('click', function(event) {
+        var button = $(this);
+        var button_group = button.parent().data().group;
+        event.preventDefault();
+        event.stopPropagation();
+        toggleFilter(button.val(), button_group);
+    });
+
     $('body').on('keydown', function(event) {
         if (
             event.target === document.querySelector('.select-list')