diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index ec2f7d3..e3368cb 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -11,6 +11,7 @@ middleware = (connect, options) ->
 		'svg'
 		'ttf'
 		'woff'
+		'woff2'
 		'otf'
 	]).join('|')
 
@@ -64,6 +65,7 @@ module.exports = (grunt) ->
 			'bower_components/ngDialog/css/ngDialog.css'
 			'bower_components/ngDialog/css/ngDialog-theme-default.css'
 			'bower_components/pure/pure-min.css'
+			'styles/fonts.css'
 			'styles/style.css'
 		]
 		test_scripts: [
@@ -181,6 +183,9 @@ module.exports = (grunt) ->
 					}}
 			}
 		}]
+		[ 'fonts', {
+			src: ['fonts/*']
+		}]
 		[ 'min', {
 			src: [ '.htaccess', 'tests/the_raven/*' ]
 			options: {
@@ -190,6 +195,10 @@ module.exports = (grunt) ->
 					}}
 			}
 		}]
+		[ 'min_fonts', {
+			src: ['fonts/*']
+			dest: 'build-min/'
+		}]
 		[ 'min_readme', {
 			cwd: ''
 			src: 'README-USAGE.md'
@@ -243,8 +252,8 @@ module.exports = (grunt) ->
 	grunt.loadNpmTasks('grunt-contrib-watch');
 
 	# Register tasks
-	grunt.registerTask 'default', [ 'coffee:main', 'copy:main', 'jade:main', 'stylus:main' ]
-	grunt.registerTask 'min', [ 'jade:min', 'copy:min', 'copy:min_readme', 'uglify:min', 'cssmin:min' ]
+	grunt.registerTask 'default', [ 'coffee:main', 'copy:main', 'copy:fonts', 'jade:main', 'stylus:main' ]
+	grunt.registerTask 'min', [ 'jade:min', 'copy:min', 'copy:min_readme', 'copy:min_fonts', 'uglify:min', 'cssmin:min' ]
 	grunt.registerTask 'test', [ 'default', 'connect:main', 'qunit' ]
 
 	grunt.registerTask 'serve', () ->
diff --git a/source/fonts/alegreya-v29-all-400.woff2 b/source/fonts/alegreya-v29-all-400.woff2
new file mode 100644
index 0000000..dac1d0c
Binary files /dev/null and b/source/fonts/alegreya-v29-all-400.woff2 differ
diff --git a/source/fonts/alegreya-v29-all-400i.woff2 b/source/fonts/alegreya-v29-all-400i.woff2
new file mode 100644
index 0000000..89d6173
Binary files /dev/null and b/source/fonts/alegreya-v29-all-400i.woff2 differ
diff --git a/source/fonts/alegreya-v29-all-700.woff2 b/source/fonts/alegreya-v29-all-700.woff2
new file mode 100644
index 0000000..b72093b
Binary files /dev/null and b/source/fonts/alegreya-v29-all-700.woff2 differ
diff --git a/source/fonts/material-icons.woff2 b/source/fonts/material-icons.woff2
new file mode 100644
index 0000000..5492a6e
Binary files /dev/null and b/source/fonts/material-icons.woff2 differ
diff --git a/source/index.html.jade b/source/index.html.jade
index d91c27f..63d00bc 100644
--- a/source/index.html.jade
+++ b/source/index.html.jade
@@ -5,8 +5,6 @@ html(ng-app="sideBySide" ng-controller="AppController")
 		title(ng-bind="title()") Side By Side viewer
 		meta(charset="utf-8")
 		meta(name="description", content="{{ description() }}")
-		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Alegreya:400,400italic,700&subset=latin,latin-ext,greek,greek-ext,cyrillic,cyrillic-ext,vietnamese")
-		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/icon?family=Material+Icons")
 		if html5Mode == true
 			script.
 				html5Mode=true;
diff --git a/source/styles/fonts.css.styl b/source/styles/fonts.css.styl
new file mode 100644
index 0000000..d421406
--- /dev/null
+++ b/source/styles/fonts.css.styl
@@ -0,0 +1,35 @@
+/* Alegreya */
+@font-face {
+  font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap;
+  src: url('../fonts/alegreya-v29-all-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap;
+  src: url('../fonts/alegreya-v29-all-400i.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap;
+  src: url('../fonts/alegreya-v29-all-700.woff2') format('woff2');
+}
+
+/* Material Icons */
+@font-face {
+  font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: swap;
+  src: url('../fonts/material-icons.woff2') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}