Add fonts

.gitignore

@@ -4,5 +4,6 @@
 /dist/
 /flow-typed/
 /node_modules/
+/static/fonts/museosans/
 /storybook-static/
 thumbs.db

package.json

@@ -126,7 +126,7 @@
     "lint-staged": "^6.1.0",
     "node-loader": "^0.6.0",
     "prettier": "^1.10.2",
-    "react-hot-loader": "^4.0.0-beta.18",
+    "react-hot-loader": "^4.0.0-beta.21",
     "webpack": "^3.10.0"
   }
 }

src/styles/global.js

@@ -8,7 +8,60 @@ import '@fortawesome/fontawesome-free-solid'
 import '@fortawesome/fontawesome-free-regular'
 import '@fortawesome/fontawesome-free-brands'
 
+import { fontFace } from 'styles/helpers'
+
+const fonts = {
+  'Open Sans': [
+    {
+      style: 'normal',
+      weight: 700,
+      file: 'opensans/OpenSans-Bold',
+    },
+    {
+      style: 'normal',
+      weight: 800,
+      file: 'opensans/OpenSans-ExtraBold',
+    },
+    {
+      style: 'normal',
+      weight: 300,
+      file: 'opensans/OpenSans-Light',
+    },
+    {
+      style: 'normal',
+      weight: 400,
+      file: 'opensans/OpenSans-Regular',
+    },
+    {
+      style: 'normal',
+      weight: 600,
+      file: 'opensans/OpenSans-SemiBold',
+    },
+  ],
+  'Museo Sans': [
+    {
+      style: 'normal',
+      weight: 100,
+      file: 'museosans/MuseoSans-ExtraLight',
+    },
+    {
+      style: 'italic',
+      weight: 100,
+      file: 'museosans/MuseoSans-ExtraLightItalic',
+    },
+    {
+      style: 'normal',
+      weight: 300,
+      file: 'museosans/MuseoSans-Light',
+    },
+  ],
+}
+
 injectGlobal`
+  ${Object.keys(fonts)
+    .map(fontName => fonts[fontName].map(f => fontFace({ name: fontName, ...f })))
+    .join(`\n`)}
+
   * {
     box-sizing: border-box;
     margin: 0;
@@ -24,8 +77,9 @@ injectGlobal`
 
   body {
     cursor: default;
-    font-family: "Open Sans", Arial, Helvetica, sans-serif;
+    font-family: "Museo Sans", "Open Sans", Arial, Helvetica, sans-serif;
     font-size: 16px;
+    font-weight: 300,
     line-height: 1.5;
   }
 

src/styles/helpers.js

@@ -7,3 +7,22 @@ export const rgba = (c: string, a: number) =>
     .alpha(a)
     .rgb()
     .toString()
+
+export const fontFace = ({
+  name,
+  file,
+  style,
+  weight,
+}: {
+  name: string,
+  file: string,
+  style: string,
+  weight: number,
+}) => `
+  @font-face {
+    font-family: "${name}";
+    src: url("/fonts/${file}.woff2") format("woff2");
+    font-style: ${style};
+    font-weight: ${weight};
+  }
+`

yarn.lock

@@ -7501,14 +7501,15 @@ react-fuzzy@^0.5.1:
     fuse.js "^3.0.1"
     prop-types "^15.5.9"
 
-react-hot-loader@^4.0.0-beta.18:
-  version "4.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0-beta.18.tgz#5a3d1b5bd813633380b88c0c660019dbf638975d"
+react-hot-loader@^4.0.0-beta.21:
+  version "4.0.0-beta.21"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0-beta.21.tgz#46a0345621f1a03cb3c1c6dc130f153fa66e5bae"
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
     hoist-non-react-statics "^2.3.1"
-    react-stand-in "^4.0.0-beta.18"
+    prop-types "^15.6.0"
+    react-stand-in "^4.0.0-beta.21"
 
 react-html-attributes@^1.3.0:
   version "1.4.1"
@@ -7655,9 +7656,9 @@ react-split-pane@^0.1.74:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
-react-stand-in@^4.0.0-beta.18:
-  version "4.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/react-stand-in/-/react-stand-in-4.0.0-beta.18.tgz#67d83309ae5d95526a2d1124beaa7ab093085cb2"
+react-stand-in@^4.0.0-beta.21:
+  version "4.0.0-beta.21"
+  resolved "https://registry.yarnpkg.com/react-stand-in/-/react-stand-in-4.0.0-beta.21.tgz#fb694e465cb20fab7f36d3284f82b68bbd7a657e"
   dependencies:
     shallowequal "^1.0.2"