feat(kilo-console): align fonts with Kilo Cloud - #11564
Merged
Merged
Conversation
Kilo Console was rendering the OS sans/mono fallback stack instead of Inter / Roboto Mono / JetBrains Mono like Kilo Cloud. Kilo Cloud's web app (apps/web/src/app/layout.tsx) loads these via `next/font/google`, but Kilo Console is a Vite-built SolidJS SPA that can't fetch Google Fonts at build time the same way. Changes: - Self-host Inter Variable, Roboto Mono Variable, and JetBrains Mono Variable as woff2 under packages/kilo-web-ui/src/assets/fonts/. All three are OFL-1.1; attribution added next to the files. - Add @font-face blocks at the top of packages/kilo-web-ui/src/styles/theme.css for the three variable fonts. The blocks live outside the scoped [data-theme="kilo"] selector so they're available everywhere Kilo Web UI styles load. - Declare the three Cloud-mirror tokens in the same scoped block where --font-family-sans/-mono are already overridden: --font-sans-loaded -> "Inter Variable" --font-mono-loaded -> "Roboto Mono Variable" --font-jetbrains -> "JetBrains Mono Variable" Re-alias --font-family-sans/-font-family-mono to point at the new tokens, so all existing var(--font-family-*) consumers across the 200+ call sites in kilo-ui, kilo-web-ui, and kilo-console pick up the new fonts with no per-site change. - Drop three hard-coded inline fallbacks in kilo-console styles (base.css, profile.css, resolved.css) that named "Inter" directly, so the value flows through the cascade instead of short-circuiting it. - No upstream changes: packages/ui/* (the @opencode-ai/ui fork) is untouched, avoiding kilocode_change markers in shared files. Verified with `bun run build` in packages/kilo-console (all four @font-face blocks emitted to the bundled CSS with hashed woff2 URLs) and `bun run typecheck` in both kilo-console and kilo-web-ui.
Contributor
Author
|
Typecheck fails due to unrelated Jetbrains Gradle issue. typecheck-js passes. |
Contributor
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Files Reviewed (10 files)
Reviewed by gpt-5.4-20260305 · Input: 135.8K · Output: 13.2K · Cached: 1M Review guidance: REVIEW.md from base branch |
catrielmuller
approved these changes
Jul 3, 2026
NJ-2020
pushed a commit
to NJ-2020/kilocode
that referenced
this pull request
Jul 4, 2026
t7tran
pushed a commit
to t7tran/kilocode
that referenced
this pull request
Aug 14, 2026
t7tran
pushed a commit
to t7tran/kilocode
that referenced
this pull request
Aug 14, 2026
feat(kilo-console): align fonts with Kilo Cloud
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Closes #11563
Context
Kilo Console was rendering the OS sans/mono fallback stack instead of Inter / Roboto Mono / JetBrains Mono like Kilo Cloud. The Cloud web app loads these via
next/font/googleinapps/web/src/app/layout.tsx, but Kilo Console is a Vite-built SolidJS SPA — it can't fetch Google Fonts at build time the same way, so theInternamed in--font-family-sanswas effectively a hopeful fallback that only worked on machines that happened to have Inter installed.This PR adds the three variable fonts and exposes them through CSS variables that mirror Cloud's naming (
--font-sans-loaded,--font-mono-loaded,--font-jetbrains). All 200+ existingvar(--font-family-*)consumers acrosskilo-console,kilo-web-ui, andkilo-uipick up the new fonts with no per-site change because the override is at the--font-family-*layer.Implementation
packages/kilo-web-ui/src/assets/fonts/: Inter Variable + Italic (rsms/inter v4.0), Roboto Mono Variable (converted from google/fonts TTF to woff2), and JetBrains Mono Variable. All three are OFL-1.1; attribution inATTRIBUTION.mdnext to the files.@font-faceblocks at the top ofpackages/kilo-web-ui/src/styles/theme.css. They sit outside the[data-theme="kilo"]scoped block so they're emitted into every bundle that imports@kilocode/kilo-web-ui/styles.html[data-theme="kilo"], html[data-theme="kilo-console"], .kilo-consoleblock (the same place that already overrode--font-family-sans/-mono), declared the three Cloud-mirror tokens and re-aliased--font-family-sans: var(--font-sans-loaded)and--font-family-mono: var(--font-mono-loaded). Cascade order is preserved by listing the local"Inter"/"Roboto Mono"names after the variable font names, so environments without the woff2 file (SSR, dev before the file is fetched) still get a sane fallback.Interfallbacks inkilo-consolestyles (base.css:2,resolved.css:121,profile.css:423) that would otherwise have short-circuited the cascade toInter, system-ui, sans-serifregardless of what--font-family-sansresolved to.wghtaxis on the variable file covers the same weight range, andfont-synthesis-weightwill synthesize missing weights if any consumer needs them later.Inter Fallback/Roboto Mono Fallbackfaces withsize-adjust/ascent-override. Cloud usesnext/fontwhich generates these automatically; for the Vite SPA we'd have to maintain the metric overrides by hand.Screenshots / Video
How to Test
Manual/local verification
bun dev console --hostname 0.0.0.0Checklist
Get in Touch
Discord: @IamCoder18