improve font loading

MarkLyck · MarkLyck · commit 41eb6f3ab4b9 · 2018-11-25T16:34:08.000+01:00
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["react-app"],
+  "extends": "eslint:recommended",
   "rules": {
     "max-len": [2, 120],
     "semi": [1, "never"],
diff --git a/lib/layout.js b/lib/layout.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { injectGlobal } from "emotion";
-import { ThemeProvider } from "emotion-theming";
-import theme from "../common/theme";
+import React from 'react'
+import { injectGlobal } from 'emotion'
+import { ThemeProvider } from 'emotion-theming'
+import theme from '../common/theme'
 
 // Add global styles
 injectGlobal`
@@ -21,6 +21,7 @@ injectGlobal`
     */
     html {
         font-family: 'Rubik', sans-serif;
+        font-display: swap;
         box-sizing: border-box;
     }
     body{
@@ -295,16 +296,6 @@ injectGlobal`
     background: #fff url('./ajax-loader.gif') center center no-repeat;
 }
 
-/* Icons */
-@font-face
-{
-    font-family: 'slick';
-    font-weight: normal;
-    font-style: normal;
-
-    src: url('./fonts/slick.eot');
-    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
-}
 /* Arrows */
 .slick-prev,
 .slick-next
@@ -492,10 +483,10 @@ injectGlobal`
     opacity: .75;
     color: black;
 }
-`;
+`
 
 export default ({ children }) => (
   <ThemeProvider theme={theme}>
     <div>{children}</div>
   </ThemeProvider>
-);
+)
diff --git a/pages/_document.js b/pages/_document.js
@@ -44,14 +44,30 @@ export default class FSDocument extends Document {
           <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#4ea4f2" />
           <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
           <link rel="manifest" href="/static/manifest.json" />
-          <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700" rel="stylesheet" />
+
+          <link rel="preconnect" href="https://vars.hotjar.com" />
+          <link rel="preconnect" href="https://js.intercomcdn.com" />
 
           <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
         </Head>
         <body>
           <Main />
           <NextScript />
 
+          {/* webfont loader */}
+          <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              WebFont.load({
+                google: {
+                  families: ['Rubik:300', 'Rubik:400', 'Rubik:500', 'Rubik:700']
+                }
+              });
+             `,
+            }}
+          />
+
           {/* Intercom */}
           <script
             async
diff --git a/server.js b/server.js
@@ -1,7 +1,7 @@
 // This file doesn't go through babel or webpack transformation.
 // Make sure the syntax and sources this file requires are compatible with the current node version you are running
 // See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babel
-const { createServer } = require('https')
+
 const { parse } = require('url')
 const { join } = require('path')
 const next = require('next')
@@ -10,6 +10,8 @@ const dev = process.env.NODE_ENV !== 'production'
 const app = next({ dev })
 const handle = app.getRequestHandler()
 
+const { createServer } = dev ? require('http') : require('https')
+
 app.prepare().then(() => {
   createServer((req, res) => {
     // Be sure to pass `true` as the second argument to `url.parse`.

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": ["react-app"],`
	`2`	`+ "extends": "eslint:recommended",`
`3`	`3`	`"rules": {`
`4`	`4`	`"max-len": [2, 120],`
`5`	`5`	`"semi": [1, "never"],`