The editor ships its own font, Source Sans 3 and Code Pro (#202)

Theme named Inter and JetBrains Mono, but neither was ever shipped,
so every machine drew the editor in whatever it had installed. The
e2e runs measured text in a different face than the user saw.

- Five Latin woff2 faces live in src/ui/fonts/ next to their OFL
  licences: Source Sans 3 400/500/600/700 and Source Code Pro 400.
- fonts.ts loads them through FontFace, and main.ts waits for them
  before the first widget exists, so Pixi measures the real face.
- A face that fails to load is reported in the console and the
  system fallback in Theme takes over.
- Theme is retuned by hand: 12 px body, 22 px rows, smaller gaps
  and padding, radius 8, and weight 500 for bold and headings.
- The scene background default follows Theme.colors.graphBackground.
  This makes core import from ui for the first time.

Findings:
- The 500 file is in the folder but fonts.ts does not register it
  yet, so weight 500 currently falls back to the 400 face.

Tests:
- ./check.sh: 141 files, 2080 tests, exit 0.
- e2e not run. Checks that measure widths or row positions are
  expected to need updating for the new metrics.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5 committed 2026-09-22 17:55:22 +02:00
1 parent 28b1afa7af
commit 940a78e8ee
12 files changed
+231 -13

No files matched your search

+3 -1
View File
@@ -5,7 +5,7 @@ import { Application, Container } from 'pixi.js';
import { captureConsole } from './editor/console/log';
import { startEditor } from './editor/App';
import { mountPlayground } from './playground';
import { initRenderLoop, initUI, Theme, VStack } from './ui';
import { initRenderLoop, initUI, loadEditorFonts, Theme, VStack } from './ui';
// Before anything else: a renderer warns while it is being created, and those warnings are
// exactly the ones worth having in the panel.
@@ -27,6 +27,7 @@ function lowLatencyContext(): { canvas?: HTMLCanvasElement; context?: WebGL2Rend
async function main(): Promise<void> {
const params = new URLSearchParams(location.search);
const fonts = loadEditorFonts();
const app = new Application();
await app.init({
resizeTo: window,
@@ -38,6 +39,7 @@ async function main(): Promise<void> {
...(params.has('vsync') ? {} : lowLatencyContext()),
});
document.body.appendChild(app.canvas);
await fonts;
const root = new VStack();
const overlay = new Container();