preload open sans font to fix screenshot rendering issue (#1509)

packages/runner/src/header/header.jsx

@@ -51,7 +51,7 @@ export default class Header extends Component {
         <ul className='menu'>
           <li className={cs('viewport-info', { 'open': this.showingViewportMenu })}>
             <button onClick={this._toggleViewportMenu}>
-              {state.width} x {state.height} <span className='viewport-scale'>({state.displayScale}%)</span>
+              {state.width} <span className='the-x'>x</span> {state.height} <span className='viewport-scale'>({state.displayScale}%)</span>
               <i className='fa fa-fw fa-info-circle'></i>
             </button>
             <div className='viewport-menu'>

packages/runner/src/header/header.scss

@@ -420,6 +420,12 @@
         color :#333;
       }
     }
+
+    // HACK: Do not change this. It preloads the font to prevent rendering
+    // issues in the reporter when taking screenshots
+    .the-x {
+      font-family: $open-sans;
+    }
   }
 
   .viewport-scale {

packages/runner/src/lib/variables.scss

@@ -4,3 +4,4 @@ $reporter-min-width: 450px;
 $message-height: 33px;
 $font-mono: Consolas, Monaco, 'Andale Mono', monospace;
 $font-sans: "Muli", "Helvetica Neue", "Arial", sans-serif;
+$open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;