Remove the montserrat font from PCUI (#68)

* remove the montserrat font from pcui * introduce a way to include fonts to built versions of pcui
playcanvas · Jan 4, 2021 · 8d79617 · 8d79617
1 parent 135068e
commit 8d79617
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,16 @@ import { Label } from 'dist/pcui-react.js';
 const helloWorldLabel = () => <Label text="Hello World" />;
 ```
 
+## Including your own font
+
+PCUI uses four css classes to add styled fonts to the various components. These are `.font-regular`, `.font-bold`, `.font-thin` and `.font-light`. You can use your own font with PCUI by adding `font-family` css rules to these classes on your webpage. For example: 
+```css
+.font-regular, .font-bold, .font-thin, .font-light {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+```
+
 ## Data Binding
 
 The pcui library offers a data binding layer that can be used to synchonise data across multiple components. It offers two way binding to a given observer object, so updates made in a component are reflected in the observers data and distributed out to all other subscribed components. A simple use case is shown below:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/pcui",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "PlayCanvas <[email protected]>",
   "homepage": "https://playcanvas.github.io/pcui",
   "description": "This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.",

diff --git a/src/class.js b/src/class.js
@@ -13,6 +13,8 @@ var ERROR = 'pcui-error';
 var FLASH = 'flash';
 var NOT_FLEXIBLE = 'pcui-not-flexible';
 var DEFAULT_MOUSEDOWN = 'pcui-default-mousedown';
+var FONT_REGULAR = 'font-regular';
+var FONT_BOLD = 'font-bold';
 
 export {
     FLEX,
@@ -29,5 +31,7 @@ export {
     ERROR,
     FLASH,
     NOT_FLEXIBLE,
-    DEFAULT_MOUSEDOWN
+    DEFAULT_MOUSEDOWN,
+    FONT_REGULAR,
+    FONT_BOLD
 };
diff --git a/src/components/Element/index.js b/src/components/Element/index.js
@@ -170,6 +170,9 @@ class Element extends Events {
         // add element class
         this._dom.classList.add(CLASS_ELEMENT);
 
+        // add font regular class
+        this._dom.classList.add(pcuiClass.FONT_REGULAR);
+
         // add user classes
         if (args.class) {
             if (Array.isArray(args.class)) {

diff --git a/src/components/Panel/index.js b/src/components/Panel/index.js
@@ -118,13 +118,13 @@ class Panel extends Container {
         this._containerHeader = new Container({
             flex: true,
             flexDirection: 'row',
-            class: [CLASS_PANEL_HEADER, 'font-bold']
+            class: [CLASS_PANEL_HEADER, pcuiClass.FONT_BOLD]
         });
 
         // header title
         this._labelTitle = new Label({
             text: args.headerText,
-            class: [CLASS_PANEL_HEADER_TITLE, 'font-bold']
+            class: [CLASS_PANEL_HEADER_TITLE, pcuiClass.FONT_BOLD]
         });
         this._containerHeader.append(this._labelTitle);
 

diff --git a/src/components/TreeView/style.scss b/src/components/TreeView/style.scss
@@ -227,7 +227,7 @@
             background-color: transparent;
 
             > input {
-                @extend .font-regular;
+                font-family: inherit;
                 font-size: 14px;
                 padding: 0;
             }

diff --git a/src/components/TreeViewItem/index.js b/src/components/TreeViewItem/index.js
@@ -1,6 +1,7 @@
 import Label from '../Label';
 import Container from '../Container';
 import TextInput from '../TextInput';
+import * as pcuiClass from '../../class';
 
 /* global TreeView */
 
@@ -264,7 +265,8 @@ class TreeViewItem extends Container {
         // show text input to enter new text
         const textInput = new TextInput({
             renderChanges: false,
-            value: this.text
+            value: this.text,
+            class: pcuiClass.FONT_REGULAR
         });
 
         textInput.on('blur', () => {

diff --git a/src/pcui/element/element-tooltip.js b/src/pcui/element/element-tooltip.js
@@ -1,5 +1,6 @@
 import Container from '../../components/Container';
 import Label from '../../components/Label';
+import * as pcuiClass from '../../class';
 
 const CLASS_ROOT = 'pcui-tooltip';
 const CLASS_TITLE = CLASS_ROOT + '-title';
@@ -48,7 +49,7 @@ class Tooltip extends Container {
         this._toggleTimeout = null;
 
         this._labelTitle = new Label({
-            class: [CLASS_TITLE, 'font-bold']
+            class: [CLASS_TITLE, pcuiClass.FONT_BOLD]
         });
         this.append(this._labelTitle);
 

diff --git a/src/scss/fonts-storybook.scss b/src/scss/fonts-storybook.scss
@@ -0,0 +1,89 @@
+@font-face {
+    font-family: 'pc-icon';
+    src: url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.eot');
+    src: url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.eot?#iefix') format('embedded-opentype'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.woff2') format('woff2'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.woff') format('woff'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.ttf') format('truetype'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.svg') format('svg');
+
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Montserrat Thin';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_QpRyS7m0dR9pA.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Light';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+.font-smooth {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: antialiased;
+}
+
+.font-thin {
+    font-family: 'Montserrat Thin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+.font-light {
+    font-family: 'Montserrat Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+.font-regular {
+    font-family: 'Montserrat Regular', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-bold {
+    font-family: 'Montserrat Bold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.font-icon {
+    font-family: 'pc-icon';
+    @extend .font-smooth;
+}
+
+.fixedFont {
+    font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+    font-weight: normal;
+    font-size: 12px;
+}
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
@@ -11,68 +11,28 @@
     font-style: normal;
 }
 
-@font-face {
-    font-family: 'Montserrat Thin';
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_QpRyS7m0dR9pA.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Light';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
 .font-smooth {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-smoothing: antialiased;
 }
 
 .font-thin {
-    font-family: 'Montserrat Thin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-style: normal;
 }
 
 .font-light {
-    font-family: 'Montserrat Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 200;
     font-style: normal;
 }
 
 .font-regular {
-    font-family: 'Montserrat Regular', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-style: normal;
 }
 
 .font-bold {
-    font-family: 'Montserrat Bold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: normal;
 }

diff --git a/src/scss/pcui-storybook.scss b/src/scss/pcui-storybook.scss
@@ -1,5 +1,5 @@
 @import './variables.scss';
-@import './fonts.scss';
+@import './fonts-storybook.scss';
 @import 'pcui-common.scss';
 @import 'pcui-hidden.scss'; // this should be last