Дизайн Система 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>