fix(web): add self-hosted Noto Sans Cyrillic fallback after Albert Sans

apps/web/public/fonts/OFL-NotoSans.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic) NotoSans-Italic[wdth,wght].ttf: Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

apps/web/public/fonts/SOURCE-NotoSansCyrillic.md

@@ -0,0 +1,49 @@
+# Noto Sans Cyrillic subsets (vendored)
+
+Self-hosted Cyrillic fallback for the Open Design web UI (#6478).
+
+## Why these files exist
+
+Albert Sans is the primary product face after #6142, but the bundled variable
+TTF has no basic Russian Cyrillic glyphs. Without a same-origin fallback,
+Russian UI text falls through to OS fonts (`PingFang SC` / `Microsoft YaHei` /
+generic `sans-serif`) and becomes non-deterministic across platforms.
+
+These four WOFF2 files are **Unicode-range limited** to Cyrillic scripts only.
+Latin continues to resolve to Albert Sans because that family is listed first
+and covers Latin code points.
+
+## Assets
+
+| File | Style | Subset | Size (bytes) |
+|------|-------|--------|--------------|
+| `noto-sans-cyrillic-wght-normal.woff2` | normal | cyrillic | 20080 |
+| `noto-sans-cyrillic-wght-italic.woff2` | italic | cyrillic | 24976 |
+| `noto-sans-cyrillic-ext-wght-normal.woff2` | normal | cyrillic-ext | 70680 |
+| `noto-sans-cyrillic-ext-wght-italic.woff2` | italic | cyrillic-ext | 81936 |
+
+Total: **197,672** bytes.
+
+## Provenance
+
+- Package: `@fontsource-variable/noto-sans@5.3.0`
+- Upstream family: Noto Sans (Google Fonts / Noto Project)
+- Source tree: https://github.com/google/fonts (via Fontsource variable build)
+- License: SIL Open Font License 1.1 — see `OFL-NotoSans.txt`
+- Vendored (not installed as an npm dependency) to match the existing
+  checked-in Albert Sans / JiduMono Pro strategy and avoid lockfile churn.
+
+## Unicode ranges (from Fontsource)
+
+- **cyrillic:** `U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116`
+  (covers the basic Russian alphabet including `Ё/ё`)
+- **cyrillic-ext:** `U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F`
+
+## CSS wiring
+
+Declared in `apps/web/src/styles/base.css` as family `"Noto Sans"` with the
+ranges above, then ordered in `tokens.css` immediately after Albert Sans:
+
+```text
+--sans: "Albert Sans", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
+```

apps/web/src/runtime/font-recovery.ts

@@ -29,6 +29,41 @@ const RECOVERABLE_FONTS: RecoverableFont[] = [
     url: '/fonts/AlbertSans-Italic-VariableFont_wght.ttf',
     descriptors: { weight: '100 900', style: 'italic' },
   },
+  // Cyrillic-only fallback faces (#6478). Same od:// recovery path as Albert.
+  {
+    family: 'Noto Sans',
+    url: '/fonts/noto-sans-cyrillic-wght-normal.woff2',
+    descriptors: {
+      weight: '100 900',
+      unicodeRange: 'U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116',
+    },
+  },
+  {
+    family: 'Noto Sans',
+    url: '/fonts/noto-sans-cyrillic-ext-wght-normal.woff2',
+    descriptors: {
+      weight: '100 900',
+      unicodeRange: 'U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F',
+    },
+  },
+  {
+    family: 'Noto Sans',
+    url: '/fonts/noto-sans-cyrillic-wght-italic.woff2',
+    descriptors: {
+      weight: '100 900',
+      style: 'italic',
+      unicodeRange: 'U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116',
+    },
+  },
+  {
+    family: 'Noto Sans',
+    url: '/fonts/noto-sans-cyrillic-ext-wght-italic.woff2',
+    descriptors: {
+      weight: '100 900',
+      style: 'italic',
+      unicodeRange: 'U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F',
+    },
+  },
 ];
 
 // Packaged builds fail 100% of url() font loads, so sweep immediately on

apps/web/src/styles/base.css

@@ -16,6 +16,44 @@
   font-weight: 100 900;
 }
 
+/* Cyrillic-only Noto Sans fallback (#6478). unicode-range keeps Latin on
+   Albert Sans; these faces only enter matching for Cyrillic code points. */
+@font-face {
+  font-family: "Noto Sans";
+  src: url("/fonts/noto-sans-cyrillic-wght-normal.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 900;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  src: url("/fonts/noto-sans-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 900;
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  src: url("/fonts/noto-sans-cyrillic-wght-italic.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  src: url("/fonts/noto-sans-cyrillic-ext-wght-italic.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
 @font-face {
   font-family: "JiduMono Pro";
   src: url("/fonts/JiduMonoPro-Regular.otf") format("opentype");

apps/web/src/styles/tokens.css

@@ -114,8 +114,9 @@
   --selected: #353535;
   --selected-soft: color-mix(in srgb, #353535 12%, transparent);
 
-  --serif: "Albert Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
-  --sans: "Albert Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
+  /* Noto Sans is Cyrillic-range-only (see base.css); Latin stays on Albert Sans. */
+  --serif: "Albert Sans", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --sans: "Albert Sans", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
   --mono: "JiduMono Pro", ui-monospace, "SFMono-Regular", monospace;
 
   /* Chat prose scale: body 13, headings 14, top-level emphasis 16 — the

apps/web/tests/runtime/font-recovery.test.ts

@@ -100,6 +100,19 @@ describe('installFontRecovery', () => {
     cancel();
   });
 
+  it('recovers the four Noto Sans Cyrillic subsets when errored (#6478)', async () => {
+    const { doc, added } = fakeDocument([{ family: 'Noto Sans', status: 'error' }]);
+    const cancel = installFontRecovery(doc);
+
+    await vi.advanceTimersByTimeAsync(0);
+    expect(added.filter((f) => f.family === 'Noto Sans')).toHaveLength(4);
+    expect(fetchMock).toHaveBeenCalledWith('/fonts/noto-sans-cyrillic-wght-normal.woff2');
+    expect(fetchMock).toHaveBeenCalledWith('/fonts/noto-sans-cyrillic-ext-wght-normal.woff2');
+    expect(fetchMock).toHaveBeenCalledWith('/fonts/noto-sans-cyrillic-wght-italic.woff2');
+    expect(fetchMock).toHaveBeenCalledWith('/fonts/noto-sans-cyrillic-ext-wght-italic.woff2');
+    cancel();
+  });
+
   it('cancel stops pending sweeps', async () => {
     const { doc, added } = fakeDocument([{ family: 'remixicon', status: 'error' }]);
     const cancel = installFontRecovery(doc);

apps/web/tests/styles/cyrillic-font-fallback.test.ts

@@ -0,0 +1,99 @@
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+import { readExpandedIndexCss } from '../helpers/read-expanded-css';
+
+const fontsDir = join(process.cwd(), 'public/fonts');
+const indexCss = readExpandedIndexCss();
+
+const CYRILLIC_WOFF2 = [
+  'noto-sans-cyrillic-wght-normal.woff2',
+  'noto-sans-cyrillic-wght-italic.woff2',
+  'noto-sans-cyrillic-ext-wght-normal.woff2',
+  'noto-sans-cyrillic-ext-wght-italic.woff2',
+] as const;
+
+/** Basic Russian alphabet including Ё/ё (66 code points) — #6478 acceptance. */
+const RUSSIAN_LETTERS =
+  'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ' + 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
+
+function parseUnicodeRange(range: string): Set<number> {
+  const out = new Set<number>();
+  for (const part of range.split(',').map((p) => p.trim()).filter(Boolean)) {
+    const m = /^U\+([0-9A-Fa-f]+)(?:-([0-9A-Fa-f]+))?$/.exec(part);
+    if (!m) continue;
+    const start = Number.parseInt(m[1]!, 16);
+    const end = m[2] ? Number.parseInt(m[2], 16) : start;
+    for (let cp = start; cp <= end; cp += 1) out.add(cp);
+  }
+  return out;
+}
+
+describe('Cyrillic sans fallback (#6478)', () => {
+  it('vendors the four Noto Sans Cyrillic WOFF2 subsets with license/source metadata', () => {
+    for (const name of CYRILLIC_WOFF2) {
+      const path = join(fontsDir, name);
+      expect(existsSync(path), path).toBe(true);
+      expect(statSync(path).size).toBeGreaterThan(1_000);
+    }
+    expect(existsSync(join(fontsDir, 'OFL-NotoSans.txt'))).toBe(true);
+    expect(existsSync(join(fontsDir, 'SOURCE-NotoSansCyrillic.md'))).toBe(true);
+
+    const total = CYRILLIC_WOFF2.reduce(
+      (sum, name) => sum + statSync(join(fontsDir, name)).size,
+      0,
+    );
+    // @fontsource-variable/noto-sans@5.3.0 four-file total is 197_672.
+    expect(total).toBe(197_672);
+  });
+
+  it('declares Noto Sans with Cyrillic unicode-ranges and keeps Albert Sans first', () => {
+    expect(indexCss).toContain('font-family: "Noto Sans"');
+    expect(indexCss).toContain('/fonts/noto-sans-cyrillic-wght-normal.woff2');
+    expect(indexCss).toContain('/fonts/noto-sans-cyrillic-ext-wght-normal.woff2');
+    expect(indexCss).toContain('/fonts/noto-sans-cyrillic-wght-italic.woff2');
+    expect(indexCss).toContain('/fonts/noto-sans-cyrillic-ext-wght-italic.woff2');
+    expect(indexCss).toMatch(/unicode-range:\s*U\+0301,\s*U\+0400-045F/);
+    expect(indexCss).toMatch(/unicode-range:\s*U\+0460-052F/);
+
+    // No external font CDN for the product UI face stack.
+    expect(indexCss).not.toMatch(/fonts\.googleapis\.com|fonts\.gstatic\.com/);
+
+    const sans = /--sans:\s*([^;]+);/.exec(indexCss)?.[1] ?? '';
+    const serif = /--serif:\s*([^;]+);/.exec(indexCss)?.[1] ?? '';
+    expect(sans.indexOf('"Albert Sans"')).toBeLessThan(sans.indexOf('"Noto Sans"'));
+    expect(serif.indexOf('"Albert Sans"')).toBeLessThan(serif.indexOf('"Noto Sans"'));
+  });
+
+  it('covers the basic Russian alphabet via declared unicode-ranges', () => {
+    const ranges = [...indexCss.matchAll(/unicode-range:\s*([^;]+);/g)].map((m) => m[1]!.trim());
+    const covered = new Set<number>();
+    for (const range of ranges) {
+      // Only count ranges attached to Noto faces: both Cyrillic ranges appear
+      // in base.css after Noto was added; Albert/Jidu have none.
+      if (!range.includes('U+0400') && !range.includes('U+0460')) continue;
+      for (const cp of parseUnicodeRange(range)) covered.add(cp);
+    }
+
+    const missing: string[] = [];
+    for (const ch of RUSSIAN_LETTERS) {
+      const cp = ch.codePointAt(0)!;
+      if (!covered.has(cp)) missing.push(`${ch} (U+${cp.toString(16).toUpperCase()})`);
+    }
+    expect(missing, `missing Russian letters: ${missing.join(', ')}`).toEqual([]);
+    expect(RUSSIAN_LETTERS).toHaveLength(66);
+  });
+
+  it('does not install Fontsource as a runtime package dependency', () => {
+    const pkg = JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf8')) as {
+      dependencies?: Record<string, string>;
+      devDependencies?: Record<string, string>;
+    };
+    const names = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies,
+    };
+    expect(Object.keys(names).some((k) => k.includes('fontsource'))).toBe(false);
+  });
+});

apps/web/tests/styles/default-background.test.ts

@@ -32,6 +32,9 @@ describe('default app background colors', () => {
     expect(sans).toBeDefined();
     expect(sans).toContain('"Albert Sans"');
     expect(sans).not.toContain("'Inter'");
-    expect(sans).toMatch(/"Albert Sans", "PingFang SC", "Microsoft YaHei"/);
+    // Noto Sans is the Cyrillic-range fallback (#6478); OS CJK faces stay after it.
+    expect(sans).toMatch(
+      /"Albert Sans", "Noto Sans", "PingFang SC", "Microsoft YaHei"/,
+    );
   });
 });