Kesko Design System’s font package ships the Skatta Sans UI typeface as ready-to-use @font-face declarations in three formats: CSS, SCSS and LESS, alongside the WOFF and WOFF2 font files.

Installation #

To install Kesko Design System fonts as a dependency in your project, run:

npm install @kesko/fonts

CSS usage #

Import the provided stylesheet in your document’s <head>:

<link rel="stylesheet" href="/assets/fonts/fonts.css" />

Then set the font-family via design tokens:

font-family: var(--k-font-family-sans);

SCSS usage #

Import at the beginning of your main SCSS file using @use with the with() clause to set the path to the provided font files:

@use "@kesko/fonts/dist/fonts.scss" with (
  $k-font-path: "/assets/fonts"
);

You can also override the font-display strategy. Supported values are auto, block, swap (default), fallback, and optional:

@use "@kesko/fonts/dist/fonts.scss" with (
  $k-font-path: "/assets/fonts",
  $k-font-display: auto
);

Less usage #

Set the font path variable before importing the stylesheet:

@k-font-path: "/assets/fonts";
@import "@kesko/fonts/dist/fonts.less";

You can also override the font-display strategy:

@k-font-path: "/assets/fonts";
@k-font-display: auto;
@import "@kesko/fonts/dist/fonts.less";

Options #

The SCSS and LESS outputs expose two options that can be overridden:

OptionDefaultDescription
$k-font-path / @k-font-path"."Path to the directory containing the font files. Adjust when the fonts are served from a CDN or a different relative path.
$k-font-display / @k-font-displayswapCSS font-display strategy. See MDN font-display.

The plain CSS output has no options, if you need path customisation, use the SCSS or LESS format, or post-process the CSS manually.

Serving the fonts #

The font files need to be available at the path you have specified. How you achieve this depends on your build setup.

Bundlers (Vite, Webpack, Parcel) #

If you import the stylesheet (CSS, SCSS, or Less) through your bundler, url() references are resolved automatically. The bundler copies the font files to your output directory. No extra configuration needed.

Static or server-rendered projects #

Copy the font files into your static assets directory as part of your build:

{
  "scripts": {
    "build:fonts": "cp -r node_modules/@kesko/fonts/dist/. public/assets/fonts/"
  }
}

Then link the stylesheet in your HTML:

<link rel="stylesheet" href="/assets/fonts/fonts.css" />

Included fonts #

FileWeightStyleStretch
SkattaSansUI_TT-Regular400normalnormal
SkattaSansUI_TT-RegularItalic400italicnormal
SkattaSansUI_TT-Medium500normalnormal
SkattaSansUI_TT-MediumItalic500italicnormal
SkattaSansUI_TT-Bold700normalnormal
SkattaSansUI_TT-Black900normalnormal
SkattaSansUI_TT-BoldNarrow700normalcondensed
SkattaSansUI_TT-BlackNarrow900normalcondensed

Each font ships as both .woff2 and .woff files.

Performance #

While @kesko/fonts has been optimized with webfont performance best practices, there’re a few additional things worth considering on the consumer side:

1. Ensuring text visibility during load #

The font package ensures this by default with font-display:swap, no need to change any settings. If you want to disable this behaviour, see options.

We also go further than just enabling this, since the package defines a local @font-face rule with size-adjust and ascent-override to closely match the fallback font and the actual webfont to avoid introducing layout shifts. To have this enabled, always set the font-family via design tokens:

font-family: var(--k-font-family-sans);

2. Preloading webfonts #

Make sure the webfonts are being preloaded for optimal loading speed to minimize the flash of unstyled text. To achieve this, add the following link elements to the <head> section of the website:

<link rel="preload" href="/assets/fonts/SkattaSansUI_TT-Regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/assets/fonts/SkattaSansUI_TT-Medium.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/assets/fonts/SkattaSansUI_TT-Bold.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/assets/fonts/SkattaSansUI_TT-Black.woff2" as="font" type="font/woff2" crossorigin />

You may need to edit the above, depending on which webfonts you are actually using from the package.

3. Configuring caching #

You should always make sure that the webfonts get served through the content delivery network using optimal caching. Here’s an example configuration:

[[headers]]
  for = "*.woff2"
  [headers.values]
    Cache-Control = "max-age=31536000,public,must-revalidate"

4. Offline support #

If your application is a progressive web app, make sure that the webfonts stay functional in case the user’s network connection fails. You can achieve this by caching webfonts in the application’s service worker:

function updateStaticCache() {
  return caches.open(staticCacheName).then(staticCache => {
    return staticCache.addAll([
      "/assets/fonts/SkattaSansUI_TT-Regular.woff2",
      "/assets/fonts/SkattaSansUI_TT-Medium.woff2",
      "/assets/fonts/SkattaSansUI_TT-Bold.woff2",
      "/assets/fonts/SkattaSansUI_TT-Black.woff2",
    ]);
  });
}

Font hinting #

Windows is notorious for its bad font rendering without hinting on low DPI screens, so to combat that, the @kesko/fonts package ships with hinted versions of the Skatta Sans UI fonts. This helps to ensure that the letter forms stay legible for all our users.

Font hinting itself is a process where fonts are adjusted for maximum readability on computer monitors. Hinting makes vector curves render nicely to a grid of pixels by providing a set of guidelines for different sizes. At low screen resolutions hinting is critical for producing clear, legible text.

Hinting

Image credit: Typotheque