Webfonts

Overview

Installing Webfonts

Usage

Get started with Nord Design System’s Webfonts that are designed to be used in combination with our CSS Framework to provide a consistent look and feel across all of our products.

Integration

Integrating Nord Design System’s Webfonts into your project is straightforward. You can start using our webfonts immediately by adding the below tag to the <head> of your application.

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" integrity="sha384-5aBiATiGs6DP0TWJ2YBM9sLGrpH6OKSFkRhK27vqs+dqKsXPOoy44FP3ckbUZwB8" crossorigin="anonymous" />

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

Please note that in most cases you will want to install our CSS Framework instead of Webfonts package directly. CSS Framework imports this package internally and gives you wide range of shorthand utility classes to modify an element's appearance in your application.

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 Design System’s 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):

Copy code

npm install @nordhealth/fonts

Install using Yarn

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

Copy code

yarn add @nordhealth/fonts

Usage

Nord Design System’s Webfonts ship 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:

Copy code

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:

Copy code

"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:

Copy code

"start": "copy:fonts & dev"

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

Copy code

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

Import in SCSS

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

Copy code

// 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:

Copy code

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

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

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

Copy code

// 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 Nord Design System's Webfonts package.

Import in Less

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

Copy code

// 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 the Nord CDN. Include this in the beginning of your head:

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" integrity="sha384-5aBiATiGs6DP0TWJ2YBM9sLGrpH6OKSFkRhK27vqs+dqKsXPOoy44FP3ckbUZwB8" crossorigin="anonymous" />

Can I use the Webfonts in my own project?

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.

Getting support

Need help with our Webfonts? Please head over to the Support page for more guidelines and ways to contact us.

Webfonts

Was this page helpful?