Use CDN for the IBM Plex Sans font

index.html

@@ -70,6 +70,9 @@ LICENSE.txt file in the root directory of this source tree.
     <meta name="twitter:image" content="https://qiskit.org/es5-bundled/images/open-graph/qiskit-logo.png">
     <meta name="twitter:image:alt" content="Qiskit logo">
 
+    <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
+    <link rel="preconnect" href="https://fonts.gstatic.com/" />
+
     <script>
       // Redux assumes `process.env.NODE_ENV` exists in the ES module build.
       // https://github.com/reactjs/redux/issues/2907
@@ -78,7 +81,19 @@ LICENSE.txt file in the root directory of this source tree.
 
     <!-- Add any global styles for body, document, etc. -->
     <style>
-      @import url("node_modules/@ibm/plex/css/ibm-plex.min.css");
+      @font-face {
+        font-family: "IBM Plex Sans";
+        font-style: normal;
+        font-weight: 400;
+        src: local("IBM Plex Sans"),
+             local("IBMPlexSans"),
+             url(https://fonts.gstatic.com/s/ibmplexsans/v3/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format("woff2");
+        /* The browser draws the text immediately in the fallback font if the font
+           isn't loaded, then swaps it with the webfont when it eventually loads
+           See: https://developers.google.com/web/updates/2016/02/font-display
+        */
+        font-display: swap;
+      }
 
       body {
         display: flex;

package.json

@@ -25,7 +25,6 @@
     ]
   },
   "dependencies": {
-    "@ibm/plex": "^1.2.0",
     "@kuscamara/code-sample": "IBMResearch/code-sample#lit-element-0.6",
     "@polymer/lit-element": "0.6.5",
     "@polymer/polymer": "^3.1.0",

polymer.json

@@ -6,8 +6,6 @@
     "manifest.json",
     "node_modules/@webcomponents/webcomponentsjs/*.{js,js.map}",
     "node_modules/@webcomponents/webcomponentsjs/bundles/**",
-    "node_modules/@ibm/plex/css/**",
-    "node_modules/@ibm/plex/**/fonts/**",
     "push-manifest.json",
     "robots.txt"
   ],