From 0dd85833e0745653cd686f47a74d06d73e152113 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 15:32:56 +0700 Subject: [PATCH 01/59] docs(typography): recommend official font builds in the typography guide (#DS-5791) --- apps/docs/src/app/structure.ts | 3 +- .../core/styles/typography/typography.en.mdx | 74 +++++++++++-------- .../core/styles/typography/typography.ru.mdx | 72 ++++++++++-------- tools/cspell-locales/en.json | 2 + tools/cspell-locales/ru.json | 2 + 5 files changed, 91 insertions(+), 62 deletions(-) diff --git a/apps/docs/src/app/structure.ts b/apps/docs/src/app/structure.ts index e2e89d48dc..663266ce61 100644 --- a/apps/docs/src/app/structure.ts +++ b/apps/docs/src/app/structure.ts @@ -252,7 +252,8 @@ const structure: DocsStructure = makeStructure({ }, svgPreview: 'typography', hasApi: false, - hasExamples: false + hasExamples: false, + isUpdated: expiresAt('2026-11-10') }, { id: DocsStructureItemId.DesignTokens, diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 9d5058cb59..43813035b8 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -2,7 +2,7 @@ Koobiq typography defines the fonts, weights, and text styles used to create a c ### Installing Fonts -Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) font by default. +Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) fonts by default. | Font | Weight | Style | | -------------- | ------ | ------ | @@ -16,45 +16,57 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http | Inter | 600 | Normal | | Inter | 700 | Normal | -Add it to your application via [Fontsource](#fontsource), or with the [Google Fonts CDN](#google-fonts-cdn). +#### Where to get the fonts -#### Fontsource +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. -Install packages: +Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: -```bash -npm install @fontsource/inter @fontsource/jetbrains-mono +```scss +@import 'assets/fonts/inter/inter.css'; ``` -Then you add the following code inside your global styles: +JetBrains Mono is needed in weights 400, 600, and 700 — they live in the `fonts/webfonts` folder of the JetBrains Mono archive: ```scss -// Inter -@import '@fontsource/inter/400.css'; -@import '@fontsource/inter/500.css'; -@import '@fontsource/inter/600.css'; -@import '@fontsource/inter/700.css'; -@import '@fontsource/inter/400-italic.css'; -@import '@fontsource/inter/500-italic.css'; - -// JetBrains Mono -@import '@fontsource/jetbrains-mono/400.css'; -@import '@fontsource/jetbrains-mono/600.css'; -@import '@fontsource/jetbrains-mono/700.css'; +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); +} ``` -#### Google Fonts CDN +#### Check the font before installing it + +Some sources serve a trimmed font. Large CDNs such as Google Fonts, and the packages built from them, split files into subsets by `unicode-range` and drop OpenType features along with the glyphs. The font still loads, but some features and characters silently stop working: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and characters such as `₽` or the em dash fall back to a system font. -Add the following code inside your `` tag: +So before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. -```html - - - - - - +#### Features from the tokens + +Koobiq enables the OpenType features through design tokens — for app text, take the values from the tokens: + +```scss +body { + font-family: var(--kbq-typography-text-normal-font-family); + font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings); +} ``` diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 0789905cb3..0ccef9a207 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -16,45 +16,57 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ | Inter | 600 | Обычный | | Inter | 700 | Обычный | -Добавьте их в ваше приложение при помощи [Fontsource](#fontsource) или [Google Fonts CDN](#google-fonts-cdn). +#### Откуда брать шрифты -#### Fontsource +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. -Установите пакеты: +Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: -```bash -npm install @fontsource/inter @fontsource/jetbrains-mono +```scss +@import 'assets/fonts/inter/inter.css'; ``` -Затем добавьте следующий код в ваши глобальные стили: +Для JetBrains Mono нужны начертания 400, 600 и 700 — они лежат в папке `fonts/webfonts` архива JetBrains Mono: ```scss -// Inter -@import '@fontsource/inter/400.css'; -@import '@fontsource/inter/500.css'; -@import '@fontsource/inter/600.css'; -@import '@fontsource/inter/700.css'; -@import '@fontsource/inter/400-italic.css'; -@import '@fontsource/inter/500-italic.css'; - -// JetBrains Mono -@import '@fontsource/jetbrains-mono/400.css'; -@import '@fontsource/jetbrains-mono/600.css'; -@import '@fontsource/jetbrains-mono/700.css'; +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); +} ``` -#### Google Fonts CDN +#### Проверьте шрифт перед подключением + +Часть источников отдаёт урезанный шрифт. Крупные CDN — например, Google Fonts — и собранные из них пакеты нарезают файлы на сабсеты по `unicode-range` и вместе с глифами выбрасывают OpenType-фичи. Шрифт при этом подключается, но часть фич и символов молча перестаёт работать: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а отдельные символы вроде `₽` или длинного тире подменяются системным шрифтом. -Добавьте следующий код в тег ``: +Поэтому перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. -```html - - - - - - +#### Фичи из токенов + +OpenType-фичи Koobiq включает через дизайн-токены — для текста приложения достаточно взять значения из них: + +```scss +body { + font-family: var(--kbq-typography-text-normal-font-family); + font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings); +} ``` diff --git a/tools/cspell-locales/en.json b/tools/cspell-locales/en.json index 69297def68..6cfd3cbaf4 100644 --- a/tools/cspell-locales/en.json +++ b/tools/cspell-locales/en.json @@ -63,6 +63,7 @@ "refreshable", "Repobeats", "Resizer", + "rsms", "scrollbars", "sidepanel", "sidepanels", @@ -75,6 +76,7 @@ "unmigrated", "unminified", "unparseable", + "webfonts", "xmark", "yarnrc" ] diff --git a/tools/cspell-locales/ru.json b/tools/cspell-locales/ru.json index 544006c874..975d6fb0d3 100644 --- a/tools/cspell-locales/ru.json +++ b/tools/cspell-locales/ru.json @@ -225,6 +225,7 @@ "рендерится", "рендерятся", "роутингом", + "сабсеты", "сайдпанелей", "сайдпанели", "сайдпанель", @@ -299,6 +300,7 @@ "тултипом", "тултипы", "уплощает", + "фичи", "форком", "форматтер", "форматтером", From 32388b9ddb7c5f909ce156ef7d0ec3870bec16d2 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 15:50:10 +0700 Subject: [PATCH 02/59] docs(typography): recommend npm font packages and explain CDN subsetting (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 4 ++-- packages/components/core/styles/typography/typography.ru.mdx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 43813035b8..26167c89d5 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,7 +18,7 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, `inter-ui` (the `web/` folder) and `dist-font-inter` work: their files are byte-identical to the official release. The `*-latin` folders in `inter-ui` are trimmed — they contain neither Cyrillic nor some of the features. Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: @@ -56,7 +56,7 @@ JetBrains Mono is needed in weights 400, 600, and 700 — they live in the `font #### Check the font before installing it -Some sources serve a trimmed font. Large CDNs such as Google Fonts, and the packages built from them, split files into subsets by `unicode-range` and drop OpenType features along with the glyphs. The font still loads, but some features and characters silently stop working: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and characters such as `₽` or the em dash fall back to a system font. +Some sources serve a trimmed font. The Google Fonts CDN and the packages built from it (Fontsource, for example) serve files split into subsets by `unicode-range`, and the OpenType features are dropped along with the glyphs. The font still loads, but some features and characters silently stop working: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and characters such as `₽` or the em dash fall back to a system font. The font file itself can still be complete: a family downloaded from fonts.google.com contains every glyph and feature — the trimming happens in the way the CDN serves it. So before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 0ccef9a207..6f581143b8 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут `inter-ui` (папка `web/`) и `dist-font-inter` — файлы в них побайтно совпадают с официальным релизом. Папки `*-latin` в `inter-ui` урезаны: в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: @@ -56,7 +56,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Проверьте шрифт перед подключением -Часть источников отдаёт урезанный шрифт. Крупные CDN — например, Google Fonts — и собранные из них пакеты нарезают файлы на сабсеты по `unicode-range` и вместе с глифами выбрасывают OpenType-фичи. Шрифт при этом подключается, но часть фич и символов молча перестаёт работать: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а отдельные символы вроде `₽` или длинного тире подменяются системным шрифтом. +Часть источников отдаёт урезанный шрифт. CDN-раздача Google Fonts и собранные из неё пакеты (например, Fontsource) отдают шрифт нарезанным на сабсеты по `unicode-range`: вместе с глифами из файла пропадают OpenType-фичи. Шрифт при этом подключается, но часть фич и символов молча перестаёт работать: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а отдельные символы вроде `₽` или длинного тире подменяются системным шрифтом. Сам файл шрифта при этом может быть полным: например, семейство, скачанное с fonts.google.com, содержит все глифы и фичи — урезает его именно раздача по частям. Поэтому перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. From dbee18454a0e2ff1a575d99b288554b3bb647fd9 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 18:11:26 +0700 Subject: [PATCH 03/59] docs(typography): link the npm font packages (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 26167c89d5..3e7efc640e 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,7 +18,7 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, `inter-ui` (the `web/` folder) and `dist-font-inter` work: their files are byte-identical to the official release. The `*-latin` folders in `inter-ui` are trimmed — they contain neither Cyrillic nor some of the features. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) (the `web/` folder) and [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files are byte-identical to the official release. The `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 6f581143b8..8cfb7e3d11 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут `inter-ui` (папка `web/`) и `dist-font-inter` — файлы в них побайтно совпадают с официальным релизом. Папки `*-latin` в `inter-ui` урезаны: в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) (папка `web/`) и [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) — файлы в них побайтно совпадают с официальным релизом. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: From 3265347ab236e2d4fadac4c2ea6769f90d357b5d Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 18:12:55 +0700 Subject: [PATCH 04/59] docs(typography): shorten the npm font packages note (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 3e7efc640e..4db448dcc4 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,7 +18,7 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) (the `web/` folder) and [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files are byte-identical to the official release. The `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) and [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files match the official release. The `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 8cfb7e3d11..7c1e11a6b0 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) (папка `web/`) и [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) — файлы в них побайтно совпадают с официальным релизом. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) и [dist-font-inter](https://www.npmjs.com/package/dist-font-inter): файлы в них совпадают с официальным релизом. Папки `*-latin` в inter-ui урезаны — в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: From 82fd2a51c735101fca6c0a440c2e67be465e8624 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 19:39:20 +0700 Subject: [PATCH 05/59] docs(typography): add @fontsource/jetbrains-mono to the npm sources (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 4db448dcc4..ebba325c2c 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,7 +18,7 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you install the font from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) and [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files match the official release. The `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you prefer installing the fonts from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work for Inter, and [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) for JetBrains Mono. The `*-latin` folders in inter-ui are trimmed: they contain neither Cyrillic nor some of the features. Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 7c1e11a6b0..7275d949fd 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если шрифт ставится из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) и [dist-font-inter](https://www.npmjs.com/package/dist-font-inter): файлы в них совпадают с официальным релизом. Папки `*-latin` в inter-ui урезаны — в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: From d8c72a89590ca915c08429be6bb30181907a2aa9 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 19:40:09 +0700 Subject: [PATCH 06/59] docs(typography): explain why the fontsource mono subsets are enough (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index ebba325c2c..23e562c21e 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,7 +18,7 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you prefer installing the fonts from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work for Inter, and [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) for JetBrains Mono. The `*-latin` folders in inter-ui are trimmed: they contain neither Cyrillic nor some of the features. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you prefer installing the fonts from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work for Inter, and [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) for JetBrains Mono: the mono styles enable no features, so its subsets lose nothing Koobiq uses. The `*-latin` folders in inter-ui are trimmed: they contain neither Cyrillic nor some of the features. Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 7275d949fd..2a2311e9bf 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono: в монотипографике токены не включают ни одной фичи, поэтому сабсеты этого пакета ничего не теряют. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: From 39e00d8e07361a10ced93e4cad3e69ad85143dc1 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Tue, 27 Oct 2026 19:41:17 +0700 Subject: [PATCH 07/59] docs(typography): fix the mono wording (#DS-5791) --- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 2a2311e9bf..56f71b900b 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,7 +18,7 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono: в монотипографике токены не включают ни одной фичи, поэтому сабсеты этого пакета ничего не теряют. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono: стили моноширинного текста не включают ни одной фичи, поэтому сабсеты этого пакета ничего не теряют. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: From ef007f85881f61f87dccbcc3a5c690fdcdfc894b Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:25:53 +0700 Subject: [PATCH 08/59] docs(typography): install JetBrains Mono from fontsource instead of self-hosting it (#DS-5791) --- .../core/styles/typography/typography.en.mdx | 36 ++++++------------- .../core/styles/typography/typography.ru.mdx | 36 ++++++------------- tools/cspell-locales/en.json | 1 - 3 files changed, 22 insertions(+), 51 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 23e562c21e..96a5f867b3 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,40 +18,26 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases). Any other source works as well — the font itself is what matters, not where you downloaded it from. If you prefer installing the fonts from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work for Inter, and [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) for JetBrains Mono: the mono styles enable no features, so its subsets lose nothing Koobiq uses. The `*-latin` folders in inter-ui are trimmed: they contain neither Cyrillic nor some of the features. +Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) or the [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) package. Any other source works as well — the font itself is what matters, not where you downloaded it from. -Copy the files into your project and declare them in your global styles. The Inter archive already ships an `inter.css` that declares both the static weights and the variable font: +Copy Inter into your project and declare it in your global styles. The archive already ships an `inter.css` that declares both the static weights and the variable font: ```scss @import 'assets/fonts/inter/inter.css'; ``` -JetBrains Mono is needed in weights 400, 600, and 700 — they live in the `fonts/webfonts` folder of the JetBrains Mono archive: +If you need Inter from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files match the official release, and the `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. -```scss -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); -} +JetBrains Mono is needed in weights 400, 600, and 700 — install it from npm. The mono styles enable no features, so the subsets in the package lose nothing: -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2'); -} +```bash +npm install @fontsource/jetbrains-mono +``` -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); -} +```scss +@import '@fontsource/jetbrains-mono/400.css'; +@import '@fontsource/jetbrains-mono/600.css'; +@import '@fontsource/jetbrains-mono/700.css'; ``` #### Check the font before installing it diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 56f71b900b..d54ce239f7 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,40 +18,26 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. Если удобнее ставить шрифты из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) для Inter и [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) для JetBrains Mono: стили моноширинного текста не включают ни одной фичи, поэтому сабсеты этого пакета ничего не теряют. Папки `*-latin` в inter-ui урезаны: в них нет ни кириллицы, ни части фич. +Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) или из пакета [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. -Скопируйте файлы в проект и объявите их в глобальных стилях. В архиве Inter уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: +Скопируйте Inter в проект и объявите его в глобальных стилях. В архиве уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: ```scss @import 'assets/fonts/inter/inter.css'; ``` -Для JetBrains Mono нужны начертания 400, 600 и 700 — они лежат в папке `fonts/webfonts` архива JetBrains Mono: +Если Inter нужен из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter): файлы в них совпадают с официальным релизом, а папки `*-latin` в inter-ui урезаны — в них нет ни кириллицы, ни части фич. -```scss -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); -} +JetBrains Mono нужен в начертаниях 400, 600 и 700 — поставьте его из npm. Для моноширинного текста токены не включают ни одной фичи, поэтому сабсеты пакета ничего не теряют: -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2'); -} +```bash +npm install @fontsource/jetbrains-mono +``` -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); -} +```scss +@import '@fontsource/jetbrains-mono/400.css'; +@import '@fontsource/jetbrains-mono/600.css'; +@import '@fontsource/jetbrains-mono/700.css'; ``` #### Проверьте шрифт перед подключением diff --git a/tools/cspell-locales/en.json b/tools/cspell-locales/en.json index 6cfd3cbaf4..756cd085cd 100644 --- a/tools/cspell-locales/en.json +++ b/tools/cspell-locales/en.json @@ -76,7 +76,6 @@ "unmigrated", "unminified", "unparseable", - "webfonts", "xmark", "yarnrc" ] From 8eca3d8fab258e4e5eb1e9ca52a473ba0f191451 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:31:24 +0700 Subject: [PATCH 09/59] docs(typography): recommend the inter-ui package and warn about its trimmed variants (#DS-5791) --- .../core/styles/typography/typography.en.mdx | 24 +++++++++---------- .../core/styles/typography/typography.ru.mdx | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 96a5f867b3..1d23fa7433 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -18,28 +18,28 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http #### Where to get the fonts -Use the official builds: Inter from [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) or the [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono) package. Any other source works as well — the font itself is what matters, not where you downloaded it from. - -Copy Inter into your project and declare it in your global styles. The archive already ships an `inter.css` that declares both the static weights and the variable font: - -```scss -@import 'assets/fonts/inter/inter.css'; -``` - -If you need Inter from npm, [inter-ui](https://www.npmjs.com/package/inter-ui) or [dist-font-inter](https://www.npmjs.com/package/dist-font-inter) work: their files match the official release, and the `*-latin` folders in inter-ui are trimmed — they contain neither Cyrillic nor some of the features. - -JetBrains Mono is needed in weights 400, 600, and 700 — install it from npm. The mono styles enable no features, so the subsets in the package lose nothing: +Both fonts are installed from npm: Inter from [inter-ui](https://www.npmjs.com/package/inter-ui), JetBrains Mono from [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). ```bash -npm install @fontsource/jetbrains-mono +npm install inter-ui @fontsource/jetbrains-mono ``` ```scss +// Inter: inter.css declares every weight we need and takes the full files from the web/ folder +@import 'inter-ui/inter.css'; + +// JetBrains Mono @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/600.css'; @import '@fontsource/jetbrains-mono/700.css'; ``` +In the inter-ui package `inter-latin.css` and the `*-latin` folders sit next to `inter.css` — those are trimmed builds, with neither Cyrillic nor some of the features. Take only `inter.css`. + +The mono styles enable no features, so the JetBrains Mono subsets lose nothing. + +The official builds — [rsms.me/inter/download](https://rsms.me/inter/download/) and the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) — work as well: the font itself is what matters, not the source. + #### Check the font before installing it Some sources serve a trimmed font. The Google Fonts CDN and the packages built from it (Fontsource, for example) serve files split into subsets by `unicode-range`, and the OpenType features are dropped along with the glyphs. The font still loads, but some features and characters silently stop working: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and characters such as `₽` or the em dash fall back to a system font. The font file itself can still be complete: a family downloaded from fonts.google.com contains every glyph and feature — the trimming happens in the way the CDN serves it. diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index d54ce239f7..4a3f530ead 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -18,28 +18,28 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ #### Откуда брать шрифты -Берите официальные сборки: Inter — с [rsms.me/inter/download](https://rsms.me/inter/download/), JetBrains Mono — из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) или из пакета [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). Источник может быть и любым другим: важен сам шрифт, а не то, откуда вы его скачали. - -Скопируйте Inter в проект и объявите его в глобальных стилях. В архиве уже есть готовый `inter.css` — он объявляет и статические начертания, и переменный шрифт: - -```scss -@import 'assets/fonts/inter/inter.css'; -``` - -Если Inter нужен из npm, подойдут [inter-ui](https://www.npmjs.com/package/inter-ui) или [dist-font-inter](https://www.npmjs.com/package/dist-font-inter): файлы в них совпадают с официальным релизом, а папки `*-latin` в inter-ui урезаны — в них нет ни кириллицы, ни части фич. - -JetBrains Mono нужен в начертаниях 400, 600 и 700 — поставьте его из npm. Для моноширинного текста токены не включают ни одной фичи, поэтому сабсеты пакета ничего не теряют: +Оба шрифта ставятся из npm: Inter — из [inter-ui](https://www.npmjs.com/package/inter-ui), JetBrains Mono — из [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). ```bash -npm install @fontsource/jetbrains-mono +npm install inter-ui @fontsource/jetbrains-mono ``` ```scss +// Inter: inter.css объявляет все нужные начертания и берёт полные файлы из папки web/ +@import 'inter-ui/inter.css'; + +// JetBrains Mono @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/600.css'; @import '@fontsource/jetbrains-mono/700.css'; ``` +В пакете inter-ui рядом с `inter.css` лежат `inter-latin.css` и папки `*-latin` — это урезанные сборки, в них нет ни кириллицы, ни части фич. Берите только `inter.css`. + +Для моноширинного текста токены не включают ни одной фичи, поэтому сабсеты JetBrains Mono ничего не теряют. + +Официальные сборки — [rsms.me/inter/download](https://rsms.me/inter/download/) и [релизы JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) — тоже подходят: важен сам шрифт, а не источник. + #### Проверьте шрифт перед подключением Часть источников отдаёт урезанный шрифт. CDN-раздача Google Fonts и собранные из неё пакеты (например, Fontsource) отдают шрифт нарезанным на сабсеты по `unicode-range`: вместе с глифами из файла пропадают OpenType-фичи. Шрифт при этом подключается, но часть фич и символов молча перестаёт работать: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а отдельные символы вроде `₽` или длинного тире подменяются системным шрифтом. Сам файл шрифта при этом может быть полным: например, семейство, скачанное с fonts.google.com, содержит все глифы и фичи — урезает его именно раздача по частям. From 6f82cf50b64784bf68b9b4a4f2cbfdc6c80f1f68 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:34:03 +0700 Subject: [PATCH 10/59] docs(typography): list Inter before JetBrains Mono in the weights table (#DS-5791) --- .../components/core/styles/typography/typography.en.mdx | 6 +++--- .../components/core/styles/typography/typography.ru.mdx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 1d23fa7433..5a89507370 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -6,15 +6,15 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http | Font | Weight | Style | | -------------- | ------ | ------ | -| JetBrains Mono | 400 | Normal | -| JetBrains Mono | 600 | Normal | -| JetBrains Mono | 700 | Normal | | Inter | 400 | Normal | | Inter | 400 | Italic | | Inter | 500 | Normal | | Inter | 500 | Italic | | Inter | 600 | Normal | | Inter | 700 | Normal | +| JetBrains Mono | 400 | Normal | +| JetBrains Mono | 600 | Normal | +| JetBrains Mono | 700 | Normal | #### Where to get the fonts diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 4a3f530ead..2c4c51ca47 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -6,15 +6,15 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ | Шрифт | Жирность | Стиль | | -------------- | -------- | ------- | -| JetBrains Mono | 400 | Обычный | -| JetBrains Mono | 600 | Обычный | -| JetBrains Mono | 700 | Обычный | | Inter | 400 | Обычный | | Inter | 400 | Курсив | | Inter | 500 | Обычный | | Inter | 500 | Курсив | | Inter | 600 | Обычный | | Inter | 700 | Обычный | +| JetBrains Mono | 400 | Обычный | +| JetBrains Mono | 600 | Обычный | +| JetBrains Mono | 700 | Обычный | #### Откуда брать шрифты From 1804e183a99085461b8bb67164014e4f9030e53b Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:37:55 +0700 Subject: [PATCH 11/59] docs(typography): list the italic weight the tokens actually use (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 5a89507370..da2e119a88 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -9,8 +9,8 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http | Inter | 400 | Normal | | Inter | 400 | Italic | | Inter | 500 | Normal | -| Inter | 500 | Italic | | Inter | 600 | Normal | +| Inter | 600 | Italic | | Inter | 700 | Normal | | JetBrains Mono | 400 | Normal | | JetBrains Mono | 600 | Normal | diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 2c4c51ca47..ee236ac469 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -9,8 +9,8 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ | Inter | 400 | Обычный | | Inter | 400 | Курсив | | Inter | 500 | Обычный | -| Inter | 500 | Курсив | | Inter | 600 | Обычный | +| Inter | 600 | Курсив | | Inter | 700 | Обычный | | JetBrains Mono | 400 | Обычный | | JetBrains Mono | 600 | Обычный | From f436427cf4b387b64b23475c43d419b7e3959f28 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:40:41 +0700 Subject: [PATCH 12/59] docs(typography): collapse the fonts table to one row per family (#DS-5791) --- .../core/styles/typography/typography.en.mdx | 15 ++++----------- .../core/styles/typography/typography.ru.mdx | 15 ++++----------- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index da2e119a88..f29bdaf5bd 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -4,17 +4,10 @@ Koobiq typography defines the fonts, weights, and text styles used to create a c Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) fonts by default. -| Font | Weight | Style | -| -------------- | ------ | ------ | -| Inter | 400 | Normal | -| Inter | 400 | Italic | -| Inter | 500 | Normal | -| Inter | 600 | Normal | -| Inter | 600 | Italic | -| Inter | 700 | Normal | -| JetBrains Mono | 400 | Normal | -| JetBrains Mono | 600 | Normal | -| JetBrains Mono | 700 | Normal | +| Font | Weights | +| -------------- | ---------------------------------------- | +| Inter | 400, 500, 600, 700; italic — 400 and 600 | +| JetBrains Mono | 400, 600, 700 | #### Where to get the fonts diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index ee236ac469..9f4dedbc6c 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -4,17 +4,10 @@ Koobiq по умолчанию использует шрифты [Inter](https://github.com/rsms/inter) и [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono). -| Шрифт | Жирность | Стиль | -| -------------- | -------- | ------- | -| Inter | 400 | Обычный | -| Inter | 400 | Курсив | -| Inter | 500 | Обычный | -| Inter | 600 | Обычный | -| Inter | 600 | Курсив | -| Inter | 700 | Обычный | -| JetBrains Mono | 400 | Обычный | -| JetBrains Mono | 600 | Обычный | -| JetBrains Mono | 700 | Обычный | +| Шрифт | Начертания | +| -------------- | -------------------------------------- | +| Inter | 400, 500, 600, 700; курсив — 400 и 600 | +| JetBrains Mono | 400, 600, 700 | #### Откуда брать шрифты From 94f6fa879d5f8f0e624d14460e29039de23d7e3b Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:44:46 +0700 Subject: [PATCH 13/59] docs(typography): drop the mono subsets note (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 -- packages/components/core/styles/typography/typography.ru.mdx | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index f29bdaf5bd..c1b99302f4 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -29,8 +29,6 @@ npm install inter-ui @fontsource/jetbrains-mono In the inter-ui package `inter-latin.css` and the `*-latin` folders sit next to `inter.css` — those are trimmed builds, with neither Cyrillic nor some of the features. Take only `inter.css`. -The mono styles enable no features, so the JetBrains Mono subsets lose nothing. - The official builds — [rsms.me/inter/download](https://rsms.me/inter/download/) and the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) — work as well: the font itself is what matters, not the source. #### Check the font before installing it diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 9f4dedbc6c..e082ec4294 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -29,8 +29,6 @@ npm install inter-ui @fontsource/jetbrains-mono В пакете inter-ui рядом с `inter.css` лежат `inter-latin.css` и папки `*-latin` — это урезанные сборки, в них нет ни кириллицы, ни части фич. Берите только `inter.css`. -Для моноширинного текста токены не включают ни одной фичи, поэтому сабсеты JetBrains Mono ничего не теряют. - Официальные сборки — [rsms.me/inter/download](https://rsms.me/inter/download/) и [релизы JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) — тоже подходят: важен сам шрифт, а не источник. #### Проверьте шрифт перед подключением From 6d3cb01f1f26e1416e54b09b462d2ff5c603d05e Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:51:03 +0700 Subject: [PATCH 14/59] docs(typography): split the article into package and manual installation sections (#DS-5791) --- .../core/styles/typography/typography.en.mdx | 26 +++++++++++++++---- .../core/styles/typography/typography.ru.mdx | 26 +++++++++++++++---- tools/cspell-locales/en.json | 1 + 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index c1b99302f4..64e43a2d71 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -9,7 +9,9 @@ Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](http | Inter | 400, 500, 600, 700; italic — 400 and 600 | | JetBrains Mono | 400, 600, 700 | -#### Where to get the fonts +Fonts come from npm packages or are wired up by hand — from files and a CDN link. The packages are preferable: they serve the full files. + +#### Packages Both fonts are installed from npm: Inter from [inter-ui](https://www.npmjs.com/package/inter-ui), JetBrains Mono from [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). @@ -29,13 +31,27 @@ npm install inter-ui @fontsource/jetbrains-mono In the inter-ui package `inter-latin.css` and the `*-latin` folders sit next to `inter.css` — those are trimmed builds, with neither Cyrillic nor some of the features. Take only `inter.css`. -The official builds — [rsms.me/inter/download](https://rsms.me/inter/download/) and the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) — work as well: the font itself is what matters, not the source. +#### A CDN or your own files -#### Check the font before installing it +The Google Fonts CDN does not work for Inter: it serves the font split by `unicode-range`, and the features are dropped along with the glyphs — the zero from the Koobiq tokens loses its slash, the alternate digits never appear. So Inter comes as files: [rsms.me/inter/download](https://rsms.me/inter/download/), where the archive ships a ready `inter.css`. + +```scss +@import 'assets/fonts/inter/inter.css'; +``` -Some sources serve a trimmed font. The Google Fonts CDN and the packages built from it (Fontsource, for example) serve files split into subsets by `unicode-range`, and the OpenType features are dropped along with the glyphs. The font still loads, but some features and characters silently stop working: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and characters such as `₽` or the em dash fall back to a system font. The font file itself can still be complete: a family downloaded from fonts.google.com contains every glyph and feature — the trimming happens in the way the CDN serves it. +JetBrains Mono can be linked from Google Fonts: + +```html + + + +``` + +Or take the weights from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) — they live in `fonts/webfonts` — and declare them in your global styles. + +#### Check the font before installing it -So before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. +Before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. Serving by `unicode-range` — which is what CDNs and the subsets built from them do, Inter in Fontsource for example — drops the features along with the glyphs: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and `₽` and the em dash fall back to a system font. The font file itself can still be complete: a family downloaded from fonts.google.com contains every glyph and feature — the trimming happens in the way it is served. #### Features from the tokens diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index e082ec4294..77f3c40844 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -9,7 +9,9 @@ Koobiq по умолчанию использует шрифты [Inter](https:/ | Inter | 400, 500, 600, 700; курсив — 400 и 600 | | JetBrains Mono | 400, 600, 700 | -#### Откуда брать шрифты +Шрифты подключают из npm-пакетов или вручную — файлами и ссылкой с CDN. Пакеты предпочтительнее: они отдают полные файлы. + +#### Пакеты Оба шрифта ставятся из npm: Inter — из [inter-ui](https://www.npmjs.com/package/inter-ui), JetBrains Mono — из [@fontsource/jetbrains-mono](https://www.npmjs.com/package/@fontsource/jetbrains-mono). @@ -29,13 +31,27 @@ npm install inter-ui @fontsource/jetbrains-mono В пакете inter-ui рядом с `inter.css` лежат `inter-latin.css` и папки `*-latin` — это урезанные сборки, в них нет ни кириллицы, ни части фич. Берите только `inter.css`. -Официальные сборки — [rsms.me/inter/download](https://rsms.me/inter/download/) и [релизы JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) — тоже подходят: важен сам шрифт, а не источник. +#### CDN или свои файлы -#### Проверьте шрифт перед подключением +Google Fonts для Inter не подходит: CDN отдаёт шрифт нарезанным по `unicode-range`, вместе с глифами из файла пропадают фичи — ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются. Поэтому Inter берут файлами: [rsms.me/inter/download](https://rsms.me/inter/download/), в архиве готовый `inter.css`. + +```scss +@import 'assets/fonts/inter/inter.css'; +``` -Часть источников отдаёт урезанный шрифт. CDN-раздача Google Fonts и собранные из неё пакеты (например, Fontsource) отдают шрифт нарезанным на сабсеты по `unicode-range`: вместе с глифами из файла пропадают OpenType-фичи. Шрифт при этом подключается, но часть фич и символов молча перестаёт работать: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а отдельные символы вроде `₽` или длинного тире подменяются системным шрифтом. Сам файл шрифта при этом может быть полным: например, семейство, скачанное с fonts.google.com, содержит все глифы и фичи — урезает его именно раздача по частям. +JetBrains Mono можно подключить по ссылке с Google Fonts: + +```html + + + +``` + +Или возьмите начертания из [релизов JetBrains](https://github.com/JetBrains/JetBrainsMono/releases) — они лежат в `fonts/webfonts` — и объявите их в глобальных стилях. + +#### Проверьте шрифт перед подключением -Поэтому перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. +Перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. Раздача по `unicode-range` — так работают CDN и собранные из них сабсеты, например Inter в Fontsource — выбрасывает вместе с глифами и фичи: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а `₽` и длинное тире подменяются системным шрифтом. Сам файл шрифта при этом может быть полным: семейство, скачанное с fonts.google.com, содержит все глифы и фичи — урезает его именно раздача по частям. #### Фичи из токенов diff --git a/tools/cspell-locales/en.json b/tools/cspell-locales/en.json index 756cd085cd..6cfd3cbaf4 100644 --- a/tools/cspell-locales/en.json +++ b/tools/cspell-locales/en.json @@ -76,6 +76,7 @@ "unmigrated", "unminified", "unparseable", + "webfonts", "xmark", "yarnrc" ] From f00c22257bb1179fe359254e2f7a111375dffc7d Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 11:52:43 +0700 Subject: [PATCH 15/59] docs(typography): trim the font check paragraph (#DS-5791) --- packages/components/core/styles/typography/typography.en.mdx | 2 +- packages/components/core/styles/typography/typography.ru.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index 64e43a2d71..f12e8afc12 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -51,7 +51,7 @@ Or take the weights from the [JetBrains releases](https://github.com/JetBrains/J #### Check the font before installing it -Before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. Serving by `unicode-range` — which is what CDNs and the subsets built from them do, Inter in Fontsource for example — drops the features along with the glyphs: the zero from the Koobiq tokens loses its slash, the alternate digits never appear, and `₽` and the em dash fall back to a system font. The font file itself can still be complete: a family downloaded from fonts.google.com contains every glyph and feature — the trimming happens in the way it is served. +Before installing the font, check the one your source serves: it has to contain the characters your interface uses and the OpenType features Koobiq enables. Serving by `unicode-range` — which is what CDNs and the subsets built from them do, Inter in Fontsource for example — drops the features along with the glyphs. #### Features from the tokens diff --git a/packages/components/core/styles/typography/typography.ru.mdx b/packages/components/core/styles/typography/typography.ru.mdx index 77f3c40844..639f87194f 100644 --- a/packages/components/core/styles/typography/typography.ru.mdx +++ b/packages/components/core/styles/typography/typography.ru.mdx @@ -51,7 +51,7 @@ JetBrains Mono можно подключить по ссылке с Google Fonts #### Проверьте шрифт перед подключением -Перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. Раздача по `unicode-range` — так работают CDN и собранные из них сабсеты, например Inter в Fontsource — выбрасывает вместе с глифами и фичи: ноль из токенов Koobiq рисуется без черты, альтернативные цифры не появляются, а `₽` и длинное тире подменяются системным шрифтом. Сам файл шрифта при этом может быть полным: семейство, скачанное с fonts.google.com, содержит все глифы и фичи — урезает его именно раздача по частям. +Перед подключением проверьте шрифт из вашего источника: в нём должны быть символы, которые использует интерфейс, и OpenType-фичи, которые включает Koobiq. Раздача по `unicode-range` — так работают CDN и собранные из них сабсеты, например Inter в Fontsource — выбрасывает вместе с глифами и фичи. #### Фичи из токенов From 71bb47445194dfd81b847adc3a8b62727c502f26 Mon Sep 17 00:00:00 2001 From: Roman Turov <31649219+rmnturov@users.noreply.github.com> Date: Wed, 28 Oct 2026 12:04:04 +0700 Subject: [PATCH 16/59] docs(typography): describe text styles and font overrides (#DS-5791) --- .../core/styles/typography/typography.en.mdx | 47 ++++++++++++++++++- .../core/styles/typography/typography.ru.mdx | 47 ++++++++++++++++++- 2 files changed, 92 insertions(+), 2 deletions(-) diff --git a/packages/components/core/styles/typography/typography.en.mdx b/packages/components/core/styles/typography/typography.en.mdx index f12e8afc12..b7d6df0212 100644 --- a/packages/components/core/styles/typography/typography.en.mdx +++ b/packages/components/core/styles/typography/typography.en.mdx @@ -1,6 +1,6 @@ Koobiq typography defines the fonts, weights, and text styles used to create a consistent visual hierarchy in interfaces. -### Installing Fonts +### Connecting Fonts Koobiq uses the [Inter](https://github.com/rsms/inter) and [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) fonts by default. @@ -49,6 +49,51 @@ JetBrains Mono can be linked from Google Fonts: Or take the weights from the [JetBrains releases](https://github.com/JetBrains/JetBrainsMono/releases) — they live in `fonts/webfonts` — and declare them in your global styles. +#### Text styles + +The text styles live in the design tokens: `text-*`, `caps-*`, `display-*`, `italic-*`, `mono-*`, `tabular-*`, `title`, `headline` and `subheading` — 45 styles. Each style is a set of `--kbq-typography-