Solve woff file imports using Rollup

Question

Solve woff file imports using Rollup

I am currently working on bundling a theme package using Rollup.js. The theme contains some global styles, specifically @font-face. I am importing the fonts and planning to inject them using styled-components injectGlobal.

However, I am encountering an issue when trying to bundle the package as Rollup is encountering errors with the font files. I initially thought that Webpack and Rollup could be used interchangeably, but it seems that is not the case. What is the correct approach to solve this problem?

Error message in console:

{ SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Unexpected character '' (1:4)
> 1 | wOFF: 6OS/2lZ`  VDMXwmtcmap@\(cvt `
    |     ^
  2 |
       fpgm
  3 | cgasp
               glyf
                    IrheadV66!vhheaV!$hmtxW;*+kernZ$;ĭloca'p\maxp+  [name+   y*/post4 prep57ڀڄxc`fb
  4 | 9X@ax3800fbf/py9#N3(!RxeTgf`uƌ3f`H(ݠw=wO?\ddGNf2,dod%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(${NeueHaasGroteskText}) format("woff");
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'NHGText';
    src: url(${NeueHaasGroteskTextBold}) format("woff");
    font-weight: bold;
    font-style: normal;
  }
`;

export default injectGlobalStyles;

javascript css node.js styled-components rollup

Answer 1

Answer №1

Another technique involves encoding font files into base64 strings and grouping them together using the rollup-plugin-url plugin:

// rollup.config.js

import url from 'rollup-plugin-url'

export default {
  // ...
  plugins: [
    // ...
    url({
      // specify the font file types to include
      include: ['**/*.woff', '**/*.woff2'],
      // ensuring the files are always bundled with the code
      limit: Infinity,
    }),
  ],
  // ...
}

Then, proceed to import the fonts as you normally would:

// 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

Another technique involves encoding font files into base64 strings and grouping them together using the rollup-plugin-url plugin:

// rollup.config.js

import url from 'rollup-plugin-url'

export default {
  // ...
  plugins: [
    // ...
    url({
      // specify the font file types to include
      include: ['**/*.woff', '**/*.woff2'],
      // ensuring the files are always bundled with the code
      limit: Infinity,
    }),
  ],
  // ...
}

Then, proceed to import the fonts as you normally would:

// 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 3

Answer №2

My exhaustive search across Google yielded no solution on how to prevent Rollup from crashing while trying to pull in the font files.

The trick that worked for me was to move my imports to requires that are triggered when the export is executed.

Updated file:

const applyGlobalStyles = () => {

  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 applyGlobalStyles;

Answer 4

My exhaustive search across Google yielded no solution on how to prevent Rollup from crashing while trying to pull in the font files.

The trick that worked for me was to move my imports to requires that are triggered when the export is executed.

Updated file:

const applyGlobalStyles = () => {

  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 applyGlobalStyles;

Solve woff file imports using Rollup

Answer №1

Answer №2

Similar questions

The hierarchical structure in the DOM that mirrors an HTML table

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

What is the best way to ensure consistency in the formatting of my email with that of my website?

Is it possible for a node's promise chain to not execute synchronously?

Dynamically insert the ng-if attribute into a directive

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

How to perfectly center the Bootstrap Modal using CSS styling

How can I convert JSON data from an array to an array of objects using JavaScript?

AngularJS: The blend of bo-bind, bindonce, and the translate filter

Spin the item around the axis of the universe

What is the best way to center a CSS arrow vertically within a table cell?

Issue: The GET request to a third-party API using Fetch API encountered a "TypeError: Failed to fetch" error

What is the best way to align a button within a Jumbotron?

Faulty Container - Excessive spacing issues

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

Upgrading to SVG icons from font icons - Eliminate inline formatting

Result of utilizing Bootstrap Radio buttons

Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

What is the best way to dynamically insert an image into an <li> element?

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?