Added HkGrotesk font

package.json

@@ -32,6 +32,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-styled-components": "^1.10.0",
     "codecov": "^3.3.0",
+    "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.1",
     "jest-styled-components": "^6.3.1",

src/components/QuarksTheme/GobalStyles.tsx

@@ -0,0 +1,77 @@
+import { createGlobalStyle } from 'styled-components'
+
+/** HKGrotesk */
+import FontLight from './font/light.woff'
+import FontLight2 from './font/light.woff2'
+import FontRegular from './font/regular.woff'
+import FontRegular2 from './font/regular.woff2'
+import FontMedium from './font/medium.woff'
+import FontMedium2 from './font/medium.woff2'
+import FontSemibold from './font/semiBold.woff'
+import FontSemibold2 from './font/semiBold.woff2'
+import FontBold from './font/bold.woff'
+import FontBold2 from './font/bold.woff2'
+
+const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: HkGrotesk;
+    src: url(${FontLight}) format('woff'),
+         url(${FontLight2}) format('woff2');
+    font-weight: 300;
+  }
+
+  @font-face {
+    font-family: HkGrotesk;
+    src: url(${FontRegular}) format('woff'),
+         url(${FontRegular2}) format('woff2');
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: HkGrotesk;
+    src: url(${FontMedium}) format('woff'),
+         url(${FontMedium2}) format('woff2');
+    font-weight: 500;
+  }
+
+  @font-face {
+    font-family: HkGrotesk;
+    src: url(${FontSemibold}) format('woff'),
+         url(${FontSemibold2}) format('woff2');
+    font-weight: 600;
+  }
+
+  @font-face {
+    font-family: HkGrotesk;
+    src: url(${FontBold}) format('woff'),
+         url(${FontBold2}) format('woff2');
+    font-weight: 800;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  html {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: HkGrotesk, sans-serif;
+    overflow-x: hidden;
+    text-rendering: optimizeLegibility;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-variant-ligatures: no-common-ligatures;
+    padding: 0;
+    margin: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, button, input { 
+    font-family: HkGrotesk, sans-serif;
+  }
+`
+export default GlobalStyles

src/components/QuarksTheme/index.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react'
 import { ThemeProvider } from 'styled-components'
 
+import GlobalStyles from './GobalStyles'
 import { light } from './stockThemes'
 
 interface Props {
@@ -13,7 +14,10 @@ interface Props {
 const QuarksTheme: FunctionComponent<Props> = ({ theme, children }) => {
   return (
     <ThemeProvider theme={theme}>
-      <>{children}</>
+      <>
+        <GlobalStyles />
+        {children}
+      </>
     </ThemeProvider>
   )
 }

src/global/fonts.d.ts

@@ -0,0 +1,2 @@
+declare module '*.woff'
+declare module '*.woff2'

webpack.config.js

@@ -19,6 +19,10 @@ module.exports = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
+        loader: 'file-loader',
+      },
     ],
   },
   plugins: [

yarn.lock

@@ -3277,6 +3277,14 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
 fileset@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"