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

sage
,
1

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: https://www.ibm.com/plex/
Repo: https://github.com/IBM/plex

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 https://github.com/webpack-contrib/sass-loader#imports
 */
// @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.

5 Likes