diff --git a/package.json b/package.json
index 174ce267eb6c..34b567eb80b3 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
"yaml-frontmatter-loader": "0.0.3"
},
"dependencies": {
+ "fontfaceobserver": "^2.0.13",
"preact": "^6.2.1",
"preact-compat": "3.11.0",
"prop-types": "^15.5.8",
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 4e9db7aaf146..5f3d41c5ae47 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
import Interactive from 'antwar-interactive';
import { GoogleAnalytics } from 'antwar-helpers';
+import FontFaceObserver from 'fontfaceobserver';
import NotificationBar from '../NotificationBar/NotificationBar';
import Navigation from '../Navigation/Navigation';
import Footer from '../Footer/Footer';
@@ -19,45 +20,106 @@ import '../SidebarItem/SidebarItem.scss';
import '../Logo/Logo.scss';
import '../Dropdown/Dropdown.scss';
-export default props => {
- // Retrieve section data
- let sections = props.children.props.section.all()
- .map(({ title, url, pages }) => ({
- title,
- url,
- pages: pages.map(({ title, url }) => ({
- title: title || url, // XXX: Title shouldn't be coming in as undefined
- url
- }))
- }));
-
- // Rename the root section ("webpack" => "Other") and push it to the end
- let rootIndex = sections.findIndex(section => section.title === 'webpack');
- let rootSection = sections.splice(rootIndex, 1)[0];
- rootSection.title = 'Other';
- sections.push(rootSection);
-
- return (
-
-
-
-
-
-
-
- { props.children }
-
-
-
-
- );
-};
+export default class Site extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ componentDidMount() {
+ // load Source Sans Pro: 200, 400, 400i, 500
+ if (window.sessionStorage.getItem('ssp-loaded') === null) {
+ const ssp200 = new FontFaceObserver('Source Sans Pro', {
+ weight: 200
+ });
+
+ const ssp400 = new FontFaceObserver('Source Sans Pro', {
+ weight: 400
+ });
+
+ const ssp400i = new FontFaceObserver('Source Sans Pro', {
+ style: 'italic',
+ weight: 400
+ });
+
+ const ssp500 = new FontFaceObserver('Source Sans Pro', {
+ weight: 500
+ });
+
+ Promise.all([ ssp200.load(), ssp400.load(), ssp400i.load(), ssp500.load() ])
+ .then(() => {
+ document.documentElement.classList.add('ssp-loaded');
+ window.sessionStorage.setItem('ssp-loaded', true);
+ });
+ }
+
+ // load Source Code Pro: 400, 600
+ if (window.sessionStorage.getItem('scp-loaded') === null) {
+ const scp400 = new FontFaceObserver('Source Code Pro', {
+ weight: 400
+ });
+
+ const scp600 = new FontFaceObserver('Source Code Pro', {
+ weight: 600
+ });
+
+ Promise.all([ scp400.load(), scp600.load() ])
+ .then(() => {
+ document.documentElement.classList.add('scp-loaded');
+ window.sessionStorage.setItem('scp-loaded', true);
+ });
+ }
+
+ // load Geomanist: 600
+ const geo600 = new FontFaceObserver('Geomanist', {
+ weight: 600
+ });
+
+ geo600.load()
+ .then(() => {
+ document.documentElement.classList.add('geo-loaded');
+ });
+ }
+
+ render() {
+ // Retrieve section data
+ let sections = this.props.children.props.section.all()
+ .map(({ title, url, pages }) => ({
+ title,
+ url,
+ pages: pages.map(({ title, url }) => ({
+ title: title || url, // XXX: Title shouldn't be coming in as undefined
+ url
+ }))
+ }));
+
+ // Rename the root section ("webpack" => "Other") and push it to the end
+ let rootIndex = sections.findIndex(section => section.title === 'webpack');
+ let rootSection = sections.splice(rootIndex, 1)[0];
+ rootSection.title = 'Other';
+ sections.push(rootSection);
+
+ return (
+
+
+
+
+
+
+
+ { this.props.children }
+
+
+
+
+ );
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bfbf62695e83..6fce50df24be 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,6 +24,10 @@ body {
font: 400 getFontSize(0) $font-stack-body;
color: getColor(elephant);
@include fontantialias(true);
+
+ .ssp-loaded & {
+ font-family: $font-stack-body-loaded;
+ }
}
a {
@@ -87,4 +91,4 @@ details:focus, summary:focus{
}
@import './markdown';
-@import './homepage';
\ No newline at end of file
+@import './homepage';
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index 96844b8212b0..23202b11d2d4 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -21,6 +21,10 @@
margin:1.5em 0 0.25em;
color:getColor(fiord);
+ .geo-loaded & {
+ font-family: $font-stack-heading-loaded;
+ }
+
&:first-child {
margin-top: 0;
line-height: 1;
@@ -261,6 +265,10 @@
background-color: transparentize(getColor(fiord), 0.94);
border-radius: 3px;
text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
+
+ .scp-loaded & {
+ font-family: $font-stack-code-loaded;
+ }
}
a code {
diff --git a/src/styles/partials/_vars.scss b/src/styles/partials/_vars.scss
index 3576a90e1940..ab1efd6301f3 100644
--- a/src/styles/partials/_vars.scss
+++ b/src/styles/partials/_vars.scss
@@ -18,9 +18,13 @@ $screens: (
medium: 768px
);
-$font-stack-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-$font-stack-heading: Geomanist, sans-serif;
-$font-stack-code: 'Source Code Pro', Consolas, "Liberation Mono", Menlo, Courier, monospace;
+$font-stack-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+$font-stack-body-loaded: 'Source Sans Pro', sans-serif;
-$text-color-highlight: lighten(map-get($colors, denim), 5%);
+$font-stack-heading: Helvetica, sans-serif;
+$font-stack-heading-loaded: Geomanist, sans-serif;
+
+$font-stack-code: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+$font-stack-code-loaded: 'Source Code Pro', monospace;
+$text-color-highlight: lighten(map-get($colors, denim), 5%);
diff --git a/template.ejs b/template.ejs
index 1a4920b8d706..87c837dd5dc2 100644
--- a/template.ejs
+++ b/template.ejs
@@ -8,7 +8,29 @@
-
+
+
+
<% for (var file in webpackConfig.template.cssFiles) { %>
diff --git a/yarn.lock b/yarn.lock
index 6f857fae483e..ad8cb629ec00 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2445,6 +2445,10 @@ follow-redirects@0.0.7:
debug "^2.2.0"
stream-consume "^0.1.0"
+fontfaceobserver@^2.0.13:
+ version "2.0.13"
+ resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz#47adbb343261eda98cb44db2152196ff124d3221"
+
fontgen-loader@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/fontgen-loader/-/fontgen-loader-0.2.1.tgz#b8ed6d9a798d5b055b80f1e21db4b04170b6f051"