title: Resolve woff imports with Rollup
body: <p>I am attempting to bundle a theme package using Rollup.js. The theme includes some global styles, most relevant @font-face. I am importing my fonts and with the intent to inject them via styled-components injectGlobal.</p>
  
  <p>When I try to bundle the package Rollup is chocking on the font files. My assumption was that Webpack and Rollup could be used pretty much interchangeably is this not the case?</p>
  
  <p>What is the correct way to do something like this?</p>
  
  <p><strong>Error in console</strong>:</p>
  
  <pre><code>{ SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Unexpected character '' (1:4)
  &gt; 1 | wOFF:�� 6���OS/2lZ`�  VDMX�w�mt�cmap@\��(cvt �`�
      |     ^
    2 |
         �fpgm��
    3 | �c��gasp
                � glyf
                      �I����rheadV�66�!�vhheaV�!$��hmtxW;*+kernZ$;��ĭloca'��p�\maxp+�  �[name+�   �y*/post4� ��prep5�7ڀɄx�c`f�b������������
    4 | ������9X�@����a����x��3800�fbf�/�p�y9#��������N3(!R��x��eT���g�f`���uƌ�3f������������`���H(ݠ���w���=�w�O���?\��dd�G�Nf2�,d�od%�t�ž��l2;��
  ...
  </code></pre>
  
  <p><strong>globalStyles.js</strong>:</p>
  
  <pre><code>import NeueHassGroteskDisplayBold from '../fonts/NeueHaasGroteskDisplayBold.woff';
  import NeueHassGroteskDisplay from '../fonts/NeueHaasGroteskDisplay.woff';
  import NeueHassGroteskText from '../fonts/NeueHaasGroteskText.woff';
  import NeueHassGroteskTextBold from '../fonts/NeueHaasGroteskTextBold.woff';
  
  const injectGlobalStyles = () =&gt; `
    * {
      box-sizing: border-box;
    }
  
    *:focus {
      outline: #000 dotted 1px;
      outline-offset: 1px;
    }
  
    body {
      padding: 0;
      margin: 0;
    }
  
    @font-face {
      font-family: 'NHGDisplay';
      src: url(${NeueHassGroteskDisplayBold}) format("woff");
      font-weight: bold;
      font-style: normal;
    }
  
    @font-face {
      font-family: 'NHGDisplay';
      src: url(${NeueHassGroteskDisplay}) format("woff");
      font-weight: normal;
      font-style: normal;
    }
  
    @font-face {
      font-family: 'NHGText';
      src: url(${NeueHassGroteskText}) format("woff");
      font-weight: normal;
      font-style: normal;
    }
  
    @font-face {
      font-family: 'NHGText';
      src: url(${NeueHassGroteskTextBold}) format("woff");
      font-weight: bold;
      font-style: normal;
    }
  `;
  
  export default injectGlobalStyles;
  </code></pre>