Integrate IBM Plex with TailwindCSS and autogenerate font rules

Why the hassle?

You might ask: Why not just download the fonts you need and copy the stylesheet into your project and adjust the font paths as needed? You can even use something like google-webfonts-helper to create a package with everything you need. But that would be too easy. ;-)

IBM Plex is available as an NPM package and updated regularly. I want to automate these updates to always have the latest font version. Manual steps (like adjusting the @font-face rules) would be a deal breaker for that.

Let’s get started

At first you need to install the @ibm/plex NPM package to your project.

$ npm install @ibm/plex

To copy the font files to a location where the webserver can serve them, you can automatically trigger a copy operation via copy-files-from-to after installing the packages. I am running a Phoenix project but you can adjust the folder structure to your liking.

{
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@ibm/plex": "^6.4.0",
    "copy-files-from-to": "^3.9.1",
    ...
  },
  "scripts": {
    "install": "copy-files-from-to",
    ...
  },
  "copyFiles": [
    {
      "from": "node_modules/@ibm/plex/IBM-Plex-{Mono,Sans,Serif}/**/*.woff2",
      "to": "priv/static/fonts/"
    }
  ]
}

The glob pattern ensures that only woff2 fonts of the mono, sans and serif variants are copied. There are a lot of other variants I am not interested in. This will keep the release as clean and small as possible.

Generate @font-face rules

If you are using Sass, you are in luck: IBM Plex relies on Sass for generating the @font-face rules. You can just import all the variants you want to support and make sure to set $font-prefix beforehand.

Since I am using TailwindCSS via the official CLI, there are some extra steps to do. After going through a few options, I finally decided to use Sass as well - but only for a single fonts.scss file:

$font-prefix: '/fonts';

@import '../../node_modules/@ibm/plex/scss/mono/index';
@import '../../node_modules/@ibm/plex/scss/sans/index';
@import '../../node_modules/@ibm/plex/scss/serif/index';

Here I can @import exactly what I need and define the $font-prefix to adjust all paths in the @font-face rules. This file will be transpiled to a CSS file (added to .gitignore) directly after installing NPM packages:

{
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@ibm/plex": "^6.4.0",
    "copy-files-from-to": "^3.9.1",
    "npm-run-all2": "6.2.0",
    "sass": "^1.70.0",
    ...
  },
  "scripts": {
    "install": "run-s install:*",
    "install:copy-files": "copy-files-from-to",
    "install:ibm-plex-css": "sass assets/scss/fonts.scss assets/css/fonts.css --no-source-map",
    ...
  },
  "copyFiles": [
    {
      "from": "node_modules/@ibm/plex/IBM-Plex-{Mono,Sans,Serif}/**/*.woff2",
      "to": "priv/static/fonts/"
    }
  ]
}

npm-run-all2 via run-s ensures that all scripts beginning with install:* are executed (sequentially) on npm install. You can also use run-p to run them in parallel.

Usage with TailwindCSS

Next you need to import the generated fonts.css file in the main TailwindCSS bundle…

@import "fonts";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

…and change your font families in the tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      sans: ['IBM Plex Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
      serif: ['IBM Plex Serif', 'Georgia', 'Times', 'serif'],
      mono: ['IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier', 'monospace']
    },
    ...

After that you can use the familiar utility classses (font-sans, font-serif, font-mono) to change the font family. Next time you update the font, everything should be generated automatically again.