Typography

DÁP Design System is designed to be used with the Inter font family. The installed package contains the prebuilt ss02 variant of the Inter font in the dist/assets/fots/inter/static folder. This font also available from the package CDN, so it can be used directly from there.

Local npm package:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500 700;
  src:
    url('/node_modules/dap-design-system/dist/assets/fonts/InterVariable.woff2')
    format('truetype');
  font-display: swap;
  font-feature-settings:
    'liga' 1,
    'calt' 1,
    'ss02' 1;
  font-variation-settings: 'slnt' 0;
  font-optical-sizing: auto;
}

CDN:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500 700;
  src:
    url('https://cdn.jsdelivr.net/npm/dap-design-system/
      dist/assets/fonts/InterVariable.woff2')
    format('truetype');
  font-display: swap;
  font-feature-settings:
    'liga' 1,
    'calt' 1,
    'ss02' 1;
  font-variation-settings: 'slnt' 0;
  font-optical-sizing: auto;
}
NextJS example

To use the Inter font in a NextJS project, add the following code to the layout root of your project:

import localFont from 'next/font/local'

const inter = localFont({
  src: '[path to the font file]',
  display: 'swap',
  weight: '500 700',
  style: 'normal',
  declarations: [
    { prop: 'font-feature-settings', value: "'liga' 1,'calt' 1,'ss02' 1" },
    { prop: 'font-variation-settings', value: "'slnt' 0" },
    { prop: 'font-optical-sizing', value: 'auto' },
  ],
})