fix(docz-theme-default): use webfontloader instead of css import

Author: pedronauck

packages/docz-theme-default/package.json

@@ -32,7 +32,8 @@
     "react-feather": "^1.1.0",
     "react-lightweight-tooltip": "^1.0.0",
     "react-powerplug": "^0.1.6",
-    "react-spinners": "^0.3.2"
+    "react-spinners": "^0.3.2",
+    "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
     "react": "^16.3.0",

packages/docz-theme-default/src/components/shared/Main/index.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Component } from 'react'
 import styled from 'react-emotion'
 import equals from 'fast-deep-equal'
-
 import { base } from '../../../styles/base'
+import webfont from 'webfontloader'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -14,6 +14,13 @@ interface MainProps {
   config: any
 }
 
+const loadfonts = () =>
+  webfont.load({
+    google: {
+      families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'],
+    },
+  })
+
 export class Main extends Component<MainProps> {
   public componentDidUpdate(prevProps: MainProps): void {
     const { config } = this.props
@@ -25,6 +32,7 @@ export class Main extends Component<MainProps> {
 
   public componentDidMount(): void {
     base(this.props.config)
+    loadfonts()
   }
 
   public render(): React.ReactNode {

packages/docz-theme-default/src/styles/base.ts

@@ -9,9 +9,7 @@ const selection = (color: string) => css`
 export const base = (config: any) => {
   injectGlobal`
     @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css');
-
     ${css(config.prismTheme)};
-    ${css(config.styles.inject)};
 
     *, *:before, *:after {
       box-sizing: border-box;

packages/docz-theme-default/src/styles/index.ts

@@ -1,10 +1,6 @@
 import * as colors from './colors'
 
 export const styles = {
-  inject: `
-    @import url('https://fonts.googleapis.com/css?family=Inconsolata');
-    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
-  `,
   body: {
     fontFamily: "'Source Sans Pro', Helvetica, sans-serif",
     fontSize: '16px',

packages/docz-theme-default/src/types.d.ts

@@ -3,6 +3,7 @@ declare module 'react-powerplug'
 declare module 'react-lightweight-tooltip'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-spinners'
+declare module 'webfontloader'
 
 declare module '*.svg' {
   const content: any

yarn.lock

@@ -11635,6 +11635,10 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+webfontloader@^1.6.28:
+  version "1.6.28"
+  resolved "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
+
 webpack-chain@^4.8.0:
   version "4.8.0"
   resolved "https://registry.npmjs.org/webpack-chain/-/webpack-chain-4.8.0.tgz#06fc3dbb9f2707d4c9e899fc6250fbcf2afe6fd1"