Serve Roboto Condensed font from the app directly (#1077)

* Serve Roboto Condensed font from the app directly

Fixes https://github.com/chanzuckerberg/cellxgene/issues/344

* Remove second google fonts reference

.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
 

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],

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)(\?.*)?$/,

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;

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;

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 |

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;
+}