Webfonts Draft

Nord Design System provides an NPM package that makes it easy to use our webfonts. This package ships with all the necessary font files in addition to Sass, Less, and CSS for self-hosting.

Integrating Nord Webfonts into your project is easy. You can start using our webfonts immediately by adding this tag to the <head> of your application:

<link href="https://cdn.jsdelivr.net/npm/@nordhealth/fonts@1.0.1/lib/fonts.css" rel="stylesheet" />

Once included, nothing else is required as we ship this stylesheet with basic font-family rules for <body> and <code> elements.

While not recommended for normal use, you can also self-host Nord Webfonts by following the instructions below. This might be required in cases where your application is running inside a sandboxed environment, or similar.

Installing Webfonts #

Before moving further with the installation, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord Webfonts in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install Nordhealth’s Fonts by following the instructions below.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/fonts

Install using Yarn #

Run in your project or website root directory (where package.json lives):

yarn add @nordhealth/fonts

Usage #

Nord Webfonts ships with font files and CSS to self-host them. While you can use Webpack or similar build tool to require the fonts, the easiest way is to install copyfiles NPM package and copy the files over:

npm install copyfiles --save-dev

Once installed, add a script to your package.json that copies the fonts from our package into a location you’ve specified:

"scripts": {
"copy:fonts": "copyfiles --flat node_modules/@nordhealth/fonts/lib/* src/SPECIFY_YOUR_PATH"
}

You can call this script while starting up your app to make sure you’ve always got the latest fonts copied over. If you're using an UNIX-like environment, you can use & as the separator:

"start": "copy:fonts & dev"

Otherwise, if you need a cross-platform solution, use npm-run-all module:

"start": "npm-run-all copy:fonts dev"

Import in SCSS #

Once you have fonts installed, you can import them in your project. Nord Webfonts provides both SCSS and Less helpers to do this. To import the fonts in SCSS, include this in the beginning of your main SCSS partial:

// Sets correct path to font files
$nord-font-path: "/assets/fonts";

// Import fonts
@import "../../node_modules/@nordhealth/fonts/lib/fonts.scss";

You may need to edit the paths shown above depending on your setup. If you’re using Webpack, you can further simplify the above to:

// Sets correct path to font files
$nord-font-path: "/assets/fonts";

// Import fonts
@import "~@nordhealth/fonts/lib/fonts.scss";

Nord Webfonts also provides a way to control the font loading technique using CSS font-display. This allows you to adjust the load performance of your app:

// Change the font loading technique
// auto, block, swap, fallback, optional
$nord-font-display: auto;

When you’ve imported the fonts in your project, you should use the font-families and font-weights defined in Design Tokens as its API and naming conventions match the ones used in Fonts package.

Import in Less #

To import fonts in Less, include this in the beginning of your main Less partial:

// Sets correct path to font files
@nord-font-path: "/assets/fonts";

// Import fonts
@import "../../node_modules/@nordhealth/fonts/lib/fonts.less";

Import in CSS #

You can also import fonts in plain CSS directly from a CDN. Include this in the beginning of your head:

<link href="https://cdn.jsdelivr.net/npm/@nordhealth/fonts@1.0.1/lib/fonts.css" rel="stylesheet" />