Make Rubik the default WebUI font
Ensure native browser controls use the shared Rubik font token so Firefox no longer falls back to its UI font in form elements.\n\nImport Rubik on the login page and document the WebUI font contract, keeping mono aliases reserved for code and fixed-width data.
Alessandro committed
Jun 11, 2026 at 04:35 UTC
983fc50a7714d4357eef4fed059404c1cfb14642
3 files changed
+30
-3
webui/AGENTS.md
+1
@@ -25,6 +25,7 @@
25
- Component HTML loaded by the shared loader may include `<title>`, module scripts, body content, and scoped styles; modal content uses the same loader path.
26
- Do not bypass WebSocket origin/auth/CSRF assumptions from frontend code.
27
- Avoid editing vendored files unless intentionally updating the vendor asset.
28
+- Rubik (`--font-family-main`) is the default WebUI text and control font; use the code/mono font tokens only for code, logs, paths, and fixed-width data.
29
30
## Work Guidance
31
webui/index.css
+22
-3
@@ -84,6 +84,9 @@
84
/* Font families */
85
--font-family-main: "Rubik", Arial, Helvetica, sans-serif;
86
--font-family-code: "Roboto Mono", monospace;
87
+ --font-family-mono: var(--font-family-code);
88
+ --font-family-monospace: var(--font-family-code);
89
+ --font-mono: var(--font-family-code);
90
91
/* Other variables */
92
--border-radius: 1.125rem;
@@ -116,12 +119,15 @@
119
}
120
121
119
-/* Reset and Base Styles */
120
-body,
122
html {
123
+ font-family: var(--font-family-main);
124
+}
125
+
126
+/* Reset and Base Styles */
127
+body {
128
background-color: var(--color-background);
129
color: var(--color-text);
124
- font-family: var(--font-family-main);
130
+ font-family: inherit;
131
width: 100%;
132
height: 100%;
133
min-width: 320px !important;
@@ -140,6 +146,19 @@ body {
146
overflow-x: hidden;
147
}
148
149
+button,
150
+input,
151
+textarea,
152
+select,
153
+option,
154
+optgroup {
155
+ font-family: var(--font-family-main);
156
+}
157
+
158
+::file-selector-button {
159
+ font-family: var(--font-family-main);
160
+}
161
+
162
x-extension:not(:empty) {
163
display: contents;
164
}
webui/login.css
+7
@@ -1,3 +1,5 @@
1
+@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
2
+
3
body {
4
background-color: #131313;
5
color: #d4d4d4;
@@ -9,6 +11,11 @@ body {
11
margin: 0;
12
}
13
14
+button,
15
+input {
16
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
17
+}
18
+
19
.login-container {
20
display: flex;
21
justify-content: center;