How to: Use IBM's Plex font in your theme

IBM’s Plex font is open source and free for anyone to use. It’s a nice typeface, and works especially well in designs that are tech-related or otherwise need to feel “modern.”

It includes a number of weights, as well as sans, sans condensed, serif, and mono varieties.

Font promo:

Here’s how to start using it in Sage.

Install the font

yarn add @ibm/plex

Define the font path prefix and Import the SCSS

In main.scss:

 * Import npm dependencies
 * Prefix your imports with `~` to grab from node_modules/
 * @see
// @import "~some-node-module";
$font-prefix: "~@ibm/plex";

@import "~@ibm/plex/scss/ibm-plex.scss";

Add your styles
Write your SASS/CSS as you normally would to use the font. For example:

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

Plex’s Github repository lists the font stacks for each family.