From 29947e25c34a13131f3058203b5a4eea2ae32a14 Mon Sep 17 00:00:00 2001
From: Matt Weiden <538456+mweiden@users.noreply.github.com>
Date: Tue, 31 Dec 2019 17:07:16 -0800
Subject: [PATCH] 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 | 1 +
.../webpack/webpack.config.dev.js | 9 +++++++-
.../webpack/webpack.config.prod.js | 14 +++++++-----
client/index.html | 1 -
client/index_template.html | 1 -
client/src/fonts/ATTRIBUTION.md | 5 +++++
client/src/fonts/RobotoCondensed-Bold.ttf | Bin 0 -> 169352 bytes
client/src/fonts/RobotoCondensed-Italic.ttf | Bin 0 -> 174736 bytes
client/src/fonts/RobotoCondensed-Regular.ttf | Bin 0 -> 169848 bytes
client/src/index.css | 21 ++++++++++++++++++
10 files changed, 44 insertions(+), 8 deletions(-)
create mode 100644 client/src/fonts/ATTRIBUTION.md
create mode 100644 client/src/fonts/RobotoCondensed-Bold.ttf
create mode 100644 client/src/fonts/RobotoCondensed-Italic.ttf
create mode 100644 client/src/fonts/RobotoCondensed-Regular.ttf
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 @@
cell×gene
-