Introducing Inter UI & Fira typefaces (#9207)

* All the fonts!

* dynamic loading

* folderizing fonts by family

* Shuffling files, getting rid off LESS fanciness

* Fira Mono, consolidating on "specimen" for LESS filenames

* Fira Code

* switch for enabling ligatures

* ligatures off for now

* license

* nixing Fira Mono, using OTF features instead.

LICENSE.txt

@@ -208,9 +208,9 @@ limitations under the License.
    subcomponents is subject to the terms and conditions of the following
    licenses.
 
-
 ========================================================================
-Third party Apache 2.0 licenses
+Third party SIL Open Font License v1.1 (OFL-1.1)
 ========================================================================
 
-(Apache 2.0 License) The Roboto family of fonts (https://github.com/google/roboto)
+(SIL OPEN FONT LICENSE Version 1.1) The Inter font family (https://github.com/rsms/inter)
+(SIL OPEN FONT LICENSE Version 1.1) The Fira Code font family (https://github.com/tonsky/FiraCode)

superset-frontend/src/SqlLab/main.less

@@ -368,6 +368,7 @@ div.tablePopover {
 
 .ace_editor,
 .ace_editor div {
+  font-feature-settings: @font-feature-settings;
   font-family: @font-family-monospace;
 }
 

superset-frontend/stylesheets/fonts/FiraCode/specimen.less

@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Light.woff2') format('woff2'),
+        url("woff/FiraCode-Light.woff") format("woff");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
+        url("woff/FiraCode-Regular.woff") format("woff");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
+        url("woff/FiraCode-Medium.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
+        url("woff/FiraCode-Bold.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code VF';
+    src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
+            url('woff/FiraCode-VF.woff') format('woff-variations');
+    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+    font-weight: 300 700;
+    font-style: normal;
+}

superset-frontend/stylesheets/fonts/InterUI/specimen.less

@@ -0,0 +1,210 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("./Inter-Thin.woff2?v=3.12") format("woff2"),
+        url("./Inter-Thin.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("./Inter-ThinItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-ThinItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("./Inter-ExtraLight.woff2?v=3.12") format("woff2"),
+        url("./Inter-ExtraLight.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("./Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-ExtraLightItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./Inter-Light.woff2?v=3.12") format("woff2"),
+        url("./Inter-Light.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./Inter-LightItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-LightItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Regular.woff2?v=3.12") format("woff2"),
+        url("./Inter-Regular.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Italic.woff2?v=3.12") format("woff2"),
+        url("./Inter-Italic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./Inter-Medium.woff2?v=3.12") format("woff2"),
+        url("./Inter-Medium.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./Inter-MediumItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-MediumItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./Inter-SemiBold.woff2?v=3.12") format("woff2"),
+        url("./Inter-SemiBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-SemiBoldItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Inter-Bold.woff2?v=3.12") format("woff2"),
+        url("./Inter-Bold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Inter-BoldItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-BoldItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("./Inter-ExtraBold.woff2?v=3.12") format("woff2"),
+        url("./Inter-ExtraBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("./Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("./Inter-Black.woff2?v=3.12") format("woff2"),
+        url("./Inter-Black.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("./Inter-BlackItalic.woff2?v=3.12") format("woff2"),
+        url("./Inter-BlackItalic.woff?v=3.12") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("./Inter-roman.var.woff2?v=3.12") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("./Inter-italic.var.woff2?v=3.12") format("woff2");
+}
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("./Inter.var.woff2?v=3.12") format("woff2");
+}

superset-frontend/stylesheets/less/fonts.less

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+/*************************************************************************/
+/* USAGE NOTES                                                           */
+/* Each typeface used in Superset should have local webfont files.       */
+/* Maintain separate specimen sheets so it's easier to add/remove fonts. */
+/* NOTE: Add font all licenses to LICENSE.text                           */
+/*************************************************************************/
+
+/******************************* Inter UI ********************************/
+@import '../fonts/InterUI/specimen.less';
+
+/******************************* Fira Code ********************************/
+@import '../fonts/FiraCode/specimen.less';

superset-frontend/stylesheets/less/index.less

@@ -19,6 +19,7 @@
 // Index .less, any imports here will be included in the final css build
 
 @import '~bootstrap/less/bootstrap.less';
+@import './fonts.less';
 @import './variables.less';
 @import './cosmo/bootswatch.less';
 

superset-frontend/stylesheets/less/variables.less

@@ -152,10 +152,18 @@
 @line-height-normal: @line-height-base;
 @line-height-loose: 2;
 
+// ****************************** Features *******************************
+@use-ligatures: false;
+
+// setting up OTF settings based on @use-ligatures:
+.set-otf-options(@use-ligatures); 
+.set-otf-options(true) {@font-feature-settings: "liga" on, "calt" on}
+.set-otf-options(false) {@font-feature-settings: "liga" off, "calt" off}
+
 // ****************************** Families ******************************
-@font-family-sans-serif: Helvetica, Arial;
+@font-family-sans-serif: "Inter", Helvetica, Arial;
 @font-family-serif: Georgia, 'Times New Roman', Times, serif;
-@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+@font-family-monospace: 'Fira Code', 'Courier New', monospace;
 @font-family-base: @font-family-sans-serif;
 
 /************************************************************************/

superset-frontend/stylesheets/superset.less

@@ -231,6 +231,7 @@ table.table-no-hover tr:hover {
 }
 
 .editable-title.datasource-sql-expression {
+  font-feature-settings: @font-feature-settings;
   font-family: @font-family-monospace;
   display: inline-block;
   min-width: @datasource-sql-expression-width;