@nlmk/design-system NPM

Дизайн Система 2.0 – версия актуальная beta

https://repos.dp.nlmk.com/artifactory/api/npm/public-ds-npm-prod/@nlmk%2Fdesign-system

Шрифты к проекту подключаются отдельно не через JSS

Используем S3 для подключения, достаточно добавить код с подключением в index.html проекта.

<link rel="preload" href="https://s3.dp.nlmk.com/assets-prod/style.css" as="style" type="text/css">
<link rel="stylesheet" href="https://s3.dp.nlmk.com/assets-prod/style.css" />

Если шрифты все еще попадают в кеш, то их следует подключить инлайн способом.

<style type="text/css">
    @font-face {
        font-family: "PT Root UI";
        src: url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Regular.eot");
        src: url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Regular.eot?#iefix") format("embedded-opentype"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Regular.woff2") format("woff2"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Regular.woff") format("woff"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: "PT Root UI";
        src: url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Bold.eot");
        src: url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Bold.eot?#iefix") format("embedded-opentype"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Bold.woff2") format("woff2"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Bold.woff") format("woff"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Bold.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;
    }
    
    @font-face {
        font-family: "PT Root UI";
        src: url("https://s3.dp.nlmk.com/assets-prod/fonts/Ptrootuimedium.woff2") format("woff2"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/Ptrootuimedium.woff") format("woff"),
            url("https://s3.dp.nlmk.com/assets-prod/fonts/PT Root UI_Medium.ttf") format("truetype");
        font-weight: 500;
        font-style: normal;
    }
    
    :root {
        --font-families-pt-root-ui: PT Root UI;
    }
    
    * {
        font-family: var(--font-families-pt-root-ui) !important;
    }
  </style>

Пример

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Development configuration</title>
    <link rel="preload" href="https://s3.dp.nlmk.com/assets-prod/style.css" as="style" type="text/css">
    <link rel="stylesheet" href="https://s3.dp.nlmk.com/assets-prod/style.css" />
    <style>
        .development-block {
            margin: 20px auto;
            border: 1px blue solid;
            padding: 20px;
            width: 90%;
        }
    </style>

    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div id="root"></div>
</body>
    <script type="module" src="./index.tsx"></script>    
</html>