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/fonts/ folder. This font also available from the package CDN, so it can be used directly from there. The Typography component is using this font by default, and it has predefined styles for the heading, body, caption and description variants.

Local npm package:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500 700;
  src:
    // dap-design-system/fdist/assets/fonts/InterVariable.woff2
    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' },
  ],
})