@datacamp/waffles-fonts

Optimized DataCamp fonts utility.

Usage no npm install needed!

<script type="module">
  import datacampWafflesFonts from 'https://cdn.skypack.dev/@datacamp/waffles-fonts';
</script>

README

Waffles Fonts

Simple command-line utility to add optimized DataCamp web fonts. Supports common Create React App and NextJS projects configurations. Alternatively, it's possible to initialize a custom setup and adjust files as you wish. In this case, fonts should be put in the project's public assets directory, and the project's cutom HTML template should be updated with an appropriate link to the CSS file.

A package contains Studio Feixen Sans and Jet Brains Mono fonts split by unicode ranges and a compatible CSS style sheet.

Usage

Navigate to the root directory of the app. To get started, use the following command and follow the instructions:

npx @datacamp/waffles-fonts

Afterward, use Waffles fontFamilies design tokens to define font-faces in custom components:

  • for regular font use sansSerif
  • for monospaced font use mono

If it's not possible to use design tokens, put the following font stacks in CSS:

  • for regular font use font-face: Studio-Feixen-Sans, Arial, sans-serif
  • for monospaced font use font-face: JetBrainsMonoNL, Menlo, Monaco, 'Courier New', monospace