diff --git a/.gitignore b/.gitignore index d3e7e2c1..5647ce5f 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,6 @@ /dist/ /flow-typed/ /node_modules/ +/static/fonts/museosans/ /storybook-static/ thumbs.db diff --git a/package.json b/package.json index 59d6ccf7..7a9fbdb8 100644 --- a/package.json +++ b/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" } } diff --git a/src/styles/global.js b/src/styles/global.js index 467c4f05..6922efde 100644 --- a/src/styles/global.js +++ b/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; } diff --git a/src/styles/helpers.js b/src/styles/helpers.js index b04c9f8a..421d2aab 100644 --- a/src/styles/helpers.js +++ b/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}; + } +` diff --git a/static/fonts/opensans/OpenSans-Bold.woff2 b/static/fonts/opensans/OpenSans-Bold.woff2 new file mode 100644 index 00000000..2b04b15b Binary files /dev/null and b/static/fonts/opensans/OpenSans-Bold.woff2 differ diff --git a/static/fonts/opensans/OpenSans-ExtraBold.woff2 b/static/fonts/opensans/OpenSans-ExtraBold.woff2 new file mode 100644 index 00000000..53188bc5 Binary files /dev/null and b/static/fonts/opensans/OpenSans-ExtraBold.woff2 differ diff --git a/static/fonts/opensans/OpenSans-Light.woff2 b/static/fonts/opensans/OpenSans-Light.woff2 new file mode 100644 index 00000000..4af45459 Binary files /dev/null and b/static/fonts/opensans/OpenSans-Light.woff2 differ diff --git a/static/fonts/opensans/OpenSans-Regular.woff2 b/static/fonts/opensans/OpenSans-Regular.woff2 new file mode 100644 index 00000000..c8050c25 Binary files /dev/null and b/static/fonts/opensans/OpenSans-Regular.woff2 differ diff --git a/static/fonts/opensans/OpenSans-SemiBold.woff2 b/static/fonts/opensans/OpenSans-SemiBold.woff2 new file mode 100644 index 00000000..a0965b7a Binary files /dev/null and b/static/fonts/opensans/OpenSans-SemiBold.woff2 differ diff --git a/yarn.lock b/yarn.lock index 4bce0c17..48c47188 100644 --- a/yarn.lock +++ b/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"