Merge pull request #3704 from weaveworks/3811-import-fonts-only-in-standalone

Import fonts only in Scope standalone

client/app/scripts/components/global-style.js

@@ -6,9 +6,6 @@ import '@fortawesome/fontawesome-free/css/all.css';
 import '@fortawesome/fontawesome-free/css/v4-shims.css';
 import 'rc-slider/dist/rc-slider.css';
 
-import ProximaNova from '../../fonts/proximanova-regular.woff';
-import RobotoMono from '../../fonts/robotomono-regular.ttf';
-
 const scopeTheme = key => props => props.theme.scope[key];
 
 const hideable = props => `
@@ -114,18 +111,6 @@ const overlayWrapper = props => `
 `;
 
 const GlobalStyle = createGlobalStyle`
-  /* stylelint-disable sh-waqar/declaration-use-variable */
-  @font-face {
-    font-family: 'proxima-nova';
-    src: url(${ProximaNova});
-  }
-
-  @font-face {
-    font-family: 'Roboto Mono';
-    src: url(${RobotoMono});
-  }
-  /* stylelint-enable sh-waqar/declaration-use-variable */
-
   /*
   * Contain all the styles in the root div instead of having them truly
   * global, so that they don't interfere with the app they're injected into.

client/app/scripts/fonts.js

@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+import ProximaNova from '../fonts/proximanova-regular.woff';
+import RobotoMono from '../fonts/robotomono-regular.ttf';
+
+const Fonts = createGlobalStyle`
+  /* stylelint-disable sh-waqar/declaration-use-variable */
+  @font-face {
+    font-family: 'proxima-nova';
+    src: url(${ProximaNova});
+  }
+
+  @font-face {
+    font-family: 'Roboto Mono';
+    src: url(${RobotoMono});
+  }
+  /* stylelint-enable sh-waqar/declaration-use-variable */
+`;
+
+export default Fonts;

client/app/scripts/main.dev.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
+import Fonts from './fonts';
 
 const store = configureStore();
 
@@ -13,6 +14,7 @@ function renderApp() {
   ReactDOM.render(
     (
       <Provider store={store}>
+        <Fonts />
         <App />
       </Provider>
     ), document.getElementById('app')

client/app/scripts/main.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
+import Fonts from './fonts';
 
 const store = configureStore();
 
@@ -13,6 +14,7 @@ function renderApp() {
   ReactDOM.render(
     (
       <Provider store={store}>
+        <Fonts />
         <App />
       </Provider>
     ), document.getElementById('app')