diff --git a/.gitignore b/.gitignore
index b428f831..a2a4695d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,7 @@ cellxgene/
 server/app/web/static/css/
 server/app/web/static/img/
 server/app/web/static/media/
+server/app/web/static/fonts/
 server/app/web/static/js/
 server/app/web/templates/index\.html
 
diff --git a/client/configuration/webpack/webpack.config.dev.js b/client/configuration/webpack/webpack.config.dev.js
index 7f8e7bc6..8dba0615 100644
--- a/client/configuration/webpack/webpack.config.dev.js
+++ b/client/configuration/webpack/webpack.config.dev.js
@@ -4,6 +4,7 @@ const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const src = path.resolve("src");
+const fonts = path.resolve("src/fonts");
 const nodeModules = path.resolve("node_modules");
 
 const babelOptions = require("../babel/babel.dev");
@@ -60,10 +61,16 @@ module.exports = {
       { test: /\.json$/, include: [src, nodeModules], loader: "json-loader" },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: nodeModules,
         loader: "file-loader",
         query: { name: "static/media/[name].[ext]" }
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        include: fonts,
+        loader: "file-loader",
+        query: { name: "static/fonts/[name].[ext]" }
+      },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
         include: [src, nodeModules],
diff --git a/client/configuration/webpack/webpack.config.prod.js b/client/configuration/webpack/webpack.config.prod.js
index ce027e5e..8ee88746 100644
--- a/client/configuration/webpack/webpack.config.prod.js
+++ b/client/configuration/webpack/webpack.config.prod.js
@@ -6,6 +6,7 @@ const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
 
 const src = path.resolve("src");
+const fonts = path.resolve("src/fonts");
 const nodeModules = path.resolve("node_modules");
 
 const babelOptions = require("../babel/babel.prod");
@@ -69,12 +70,15 @@ module.exports = {
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: nodeModules,
         loader: "file-loader",
-        options: {
-          name: "[name].[hash:8].[ext]",
-          outputPath: "static/media/"
-        }
+        query: { name: "static/media/[name].[ext]" }
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        include: fonts,
+        loader: "file-loader",
+        query: { name: "static/fonts/[name].[ext]" }
       },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
diff --git a/client/index.html b/client/index.html
index 98341fbe..134e38c9 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>cell&times;gene</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700" rel="stylesheet">
     <style>
       html, body, p, h1, h2, h3, h4, h5, h6, span, button, input, label, text, div {
         font-family: 'Roboto Condensed','Helvetica Neue','Helvetica','Arial',sans-serif;
diff --git a/client/index_template.html b/client/index_template.html
index 85d2800f..a4fe5425 100644
--- a/client/index_template.html
+++ b/client/index_template.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>cell&times;gene</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700" rel="stylesheet">
     <style>
         html, body, p, h1, h2, h3, h4, h5, h6, span, button, input, label, text, div {
             font-family: 'Roboto Condensed', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
diff --git a/client/src/fonts/ATTRIBUTION.md b/client/src/fonts/ATTRIBUTION.md
new file mode 100644
index 00000000..21e03a32
--- /dev/null
+++ b/client/src/fonts/ATTRIBUTION.md
@@ -0,0 +1,5 @@
+# Third-party fonts used in cellxgene
+
+| Font Family | License at time of download | URL |
+|-------------|-----------------------------|-----|
+| Roboto Conensed | Apache v2.0 | https://fonts.google.com/specimen/Roboto+Condensed |
diff --git a/client/src/fonts/RobotoCondensed-Bold.ttf b/client/src/fonts/RobotoCondensed-Bold.ttf
new file mode 100644
index 00000000..7fe31289
Binary files /dev/null and b/client/src/fonts/RobotoCondensed-Bold.ttf differ
diff --git a/client/src/fonts/RobotoCondensed-Italic.ttf b/client/src/fonts/RobotoCondensed-Italic.ttf
new file mode 100644
index 00000000..12216d67
Binary files /dev/null and b/client/src/fonts/RobotoCondensed-Italic.ttf differ
diff --git a/client/src/fonts/RobotoCondensed-Regular.ttf b/client/src/fonts/RobotoCondensed-Regular.ttf
new file mode 100644
index 00000000..62dd61e5
Binary files /dev/null and b/client/src/fonts/RobotoCondensed-Regular.ttf differ
diff --git a/client/src/index.css b/client/src/index.css
index f0e9c405..270648aa 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -7,3 +7,24 @@ namespace mangling on these definitions.  See webpack config for specifics.
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
 @import "~@blueprintjs/select/lib/css/blueprint-select.css";
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: italic;
+    src: url('./fonts/RobotoCondensed-Italic.ttf') format('truetype');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    src: url('./fonts/RobotoCondensed-Regular.ttf') format('truetype');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    src: url('./fonts/RobotoCondensed-Bold.ttf') format('truetype');
+    font-weight: 700;
+}