perf: use local fonts + move some static css to emotion global styles

dist/assets/static/css/defaults.css

@@ -1,31 +1,85 @@
+/*
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+ */
+
 
 /* -------  resets  ------- */
-* { margin:0;padding:0 }
-html, body { height:100%;box-sizing:border-box }
-*, *::before, *::after { box-sizing:inherit }
-img { max-width:100% }
-a { color:inherit;text-decoration:none }
-ul, menu { list-style-type:none }
-h1,h2,h3,h4,h5,h6 { font-weight:inherit }
-strong { font-weight:700 }
-figure { text-align:center }
-figcaption { font-size:0.9em }
-table, hr { border:0 }
-nav, menu { letter-spacing:0 }
-sup { font-size:66% }
+
+* { margin: 0; padding: 0 }
+html, body { height: 100%; box-sizing: border-box }
+*, *::before, *::after { box-sizing: inherit }
+img { max-width: 100% }
+a { color: inherit; text-decoration: none }
+ul, menu { list-style-type: none }
+h1,h2,h3,h4,h5,h6 { font-weight: inherit }
+strong { font-weight: 700 }
+figure { text-align: center }
+figcaption { font-size: 0.9em }
+table, hr { border: 0 }
+nav, menu { letter-spacing: 0 }
+sup { font-size: 66% }
 
 /* -------  body  ------- */
 body {
   background:#d3d3d3;
   color:#070707;
-  font:400 16px/1.45 'Avenir Next',Avenir,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
-  letter-spacing:1px;
-  text-rendering:optimizeLegibility;
-  -webkit-font-smoothing:antialiased;
-  -webkit-tap-highlight-color:transparent;
-  -moz-osx-font-smoothing:grayscale;
+  font: 400 16px/1.45 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  letter-spacing: 1px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  -moz-osx-font-smoothing: grayscale
 }
 
 /* -------  app  ------- */
-#app { width:100%;height:100%;opacity:0;transition:opacity 0.44s 0.22s }
-#app.ready { font-family:'Comfortaa',cursive;opacity:1 }
+#app {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.44s 0.22s
+}
+#app.ready {
+  font-family: 'Comfortaa', cursive;
+  opacity:1
+}

dist/assets/static/css/fonts.css

@@ -0,0 +1,43 @@
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Comfortaa'),
+    url('../fonts/comfortaa-v28-latin-300.woff2') format('woff2'),
+    url('../fonts/comfortaa-v28-latin-300.woff') format('woff');
+}
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Comfortaa'),
+    url('../fonts/comfortaa-v28-latin-regular.woff2') format('woff2'),
+    url('../fonts/comfortaa-v28-latin-regular.woff') format('woff');
+}
+/* @font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Comfortaa'), url('../fonts/comfortaa-v28-latin-500.woff2') format('woff2'),
+    url('../fonts/comfortaa-v28-latin-500.woff') format('woff');
+}
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Comfortaa'), url('../fonts/comfortaa-v28-latin-600.woff2') format('woff2'),
+    url('../fonts/comfortaa-v28-latin-600.woff') format('woff');
+} */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Comfortaa'),
+    url('../fonts/comfortaa-v28-latin-700.woff2') format('woff2'),
+    url('../fonts/comfortaa-v28-latin-700.woff') format('woff');
+}

src/assets/styles/resets.css

@@ -0,0 +1,13 @@
+* { margin: 0; padding: 0 }
+html, body { height: 100%; box-sizing: border-box }
+*, *::before, *::after { box-sizing: inherit }
+img { max-width: 100% }
+a { color: inherit; text-decoration: none }
+ul, menu { list-style-type: none }
+h1,h2,h3,h4,h5,h6 { font-weight: inherit }
+strong { font-weight: 700 }
+figure { text-align: center }
+figcaption { font-size: 0.9em }
+table, hr { border: 0 }
+nav, menu { letter-spacing: 0 }
+sup { font-size: 66% }

src/components/Global/Global.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import { Global as GlobalStyles, css } from '@emotion/core'
+// import resets from 'assets/styles/resets.css'
+
+const Global = () => (
+  <GlobalStyles
+    styles={theme => css`
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        height: 100%;
+        box-sizing: border-box;
+      }
+      *,
+      ::before,
+      *::after {
+        box-sizing: inherit;
+      }
+      img {
+        max-width: 100%;
+      }
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+      ul,
+      menu {
+        list-style-type: none;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: inherit;
+      }
+      strong {
+        font-weight: 700;
+      }
+      figure {
+        text-align: center;
+      }
+      figcaption {
+        font-size: 0.9em;
+      }
+      table,
+      hr {
+        border: 0;
+      }
+      nav,
+      menu {
+        letter-spacing: 0;
+      }
+      sup {
+        font-size: 66%;
+      }
+
+      body {
+        background: ${theme.colors.grey[3]};
+        color: ${theme.colors.grey[8]};
+        font: 400 16px/1.45 'Avenir Next', Avenir, 'Segoe UI', Roboto,
+          'Helvetica Neue', sans-serif;
+        letter-spacing: 1px;
+        transition: opacity 0.44s 0.66s;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -webkit-tap-highlight-color: transparent;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      #root {
+        height: 100%;
+        font-family: 'Comfortaa', cursive;
+      }
+    `}
+  />
+)
+
+export default Global

src/components/index.js

@@ -1,4 +1,5 @@
 /* -------  base components  ------- */
+import Global from './Global/Global'
 import Header from './Header/Header'
 import Footer from './Footer/Footer'
 import Social from './Social/Social'
@@ -34,6 +35,7 @@ import Diamond from './Diamond/Diamond'
 import UpdateTime from './UpdateTime/UpdateTime'
 
 export {
+  Global,
   Header,
   Footer,
   Social,

src/index.html

@@ -8,7 +8,7 @@
     <title>uxscoreboard</title>
     <meta name="description" content="uxscoreboard · A sports scoreboard web app built on ES6, React, and Node.js—features MLB, NBA, NFL, NHL, and MLS (coming soon) games.">
     <link rel="icon" href="/assets/static/other/favicon.ico">
-    <link rel="stylesheet" href="/assets/static/css/defaults.css">
+    <link rel="stylesheet" href="/assets/static/css/fonts.css">
     <!--
                                              _                         _
                                             | |                       | |

src/index.js

@@ -7,6 +7,7 @@ import ReactGA from 'react-ga'
 import * as Sentry from '@sentry/browser'
 
 import { MainContainer as Root } from 'containers'
+import { Global } from 'components'
 import theme from './theme'
 
 require('dotenv').config()
@@ -21,6 +22,7 @@ if (process.env.NODE_ENV === 'production') {
 const renderApp = Root => {
   render(
     <ThemeProvider theme={theme}>
+      <Global />
       <AppContainer>
         <Router>
           <React.Suspense fallback={<div />}>
@@ -29,7 +31,7 @@ const renderApp = Root => {
         </Router>
       </AppContainer>
     </ThemeProvider>,
-    document.getElementById('app')
+    document.getElementById('root')
   )
 }