Resolve woff imports with Rollup

Question

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.

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?

What is the correct way to do something like this?

Error in console:

{ SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Unexpected character '' (1:4)
> 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;��
...

globalStyles.js:

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 = () => `
  * {
    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;

Answer 1

Another way would be to bundle the font files as base64 strings using rollup-plugin-url:

// rollup.config.js

import url from 'rollup-plugin-url'

export default {
  // ...
  plugins: [
    // ...
    url({
      // by default, rollup-plugin-url will not handle font files
      include: ['**/*.woff', '**/*.woff2'],
      // setting infinite limit will ensure that the files 
      // are always bundled with the code, not copied to /dist
      limit: Infinity,
    }),
  ],
  // ...
}

and then import them as usual:

// some-file.js

import { createGlobalStyle } from 'styled-components'
import MyFontWoff from '../fonts/my-font.woff'

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'MyFont';
    src: url(${MyFontWoff}) format('woff');
    font-weight: normal;
    font-style: normal;
  }
`

Answer 2

After exhaustive Google searches I could not find a way to get Rollup to pull in the font files without crashing.

I moved my imports to requires that get called when the export is executed and that solved my problem.

Update file:

const injectGlobalStyles = () => {

  const NeueHassGroteskDisplayBold = require('../fonts/NeueHaasGroteskDisplayBold.woff');
  const NeueHassGroteskDisplay = require('../fonts/NeueHaasGroteskDisplay.woff');
  const NeueHassGroteskText = require('../fonts/NeueHaasGroteskText.woff');
  const NeueHassGroteskTextBold = require('../fonts/NeueHaasGroteskTextBold.woff');

  return `
    * {
      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;