Search code examples
reactjsvitecarbon-design-system

Font errors in console when using IBM Carbon Design System in React

I'm quite new to React and am trying to use IBM Carbon's Design system for some simple components, but I keep on getting the following console errors:

Failed to decode downloaded font: <URL>
OTS parsing error: invalid sfntVersion: 1008813135

Steps that I followed:

  1. I installed the DS with npm install --save @carbon/react as well as Scss with npm install sass
  2. I renamed App.css and index.css to .scss and both of their contents are just @use "@carbon/react";

From what I've Googled it seems to be an error with finding the fonts, but the IBM docs also mention that I don't need to install the fonts separately as they're included with the React components.

Thanks in advance!

Ps. I'm usint Vite React TS

Solution

  • So I figured it out by finding a vite example on GitHub. The index.css file needs to have the following contents:

    @use '@carbon/react' with (
  $font-path: '@ibm/plex'
);

    and not what I had before which was simply:

    @use '@carbon/react'