v6: Ship Inter and JetBrains Mono as the default fonts#4426
Closed
trevor-scheer wants to merge 3 commits into
Closed
v6: Ship Inter and JetBrains Mono as the default fonts#4426trevor-scheer wants to merge 3 commits into
trevor-scheer wants to merge 3 commits into
Conversation
Self-host Inter and JetBrains Mono (Latin + Latin Extended, regular and italic) as base64 `font/inter.css` / `font/jetbrains-mono.css`, matching the existing `roboto.css` / `fira-code.css` pattern. `graphiql`'s `style.css` now imports these instead, so `tokens.css`'s existing `--font-family: 'Inter'` / `--font-family-mono: 'JetBrains Mono'` values actually resolve to a loaded font instead of falling through to the system default. Roboto and Fira Code stay in the repo for v5 lineage.
.graphiql-container redeclared --font-family, --font-family-mono, and --font-size-body with frozen v5 values, which won the cascade over tokens.css's :root declarations. That's why the app was actually rendering Roboto/Fira Code regardless of the tokens, and why --font-size-body never scaled with the font-size preset. Dropping the redeclarations lets tokens.css win; the --color-*/--alpha-* frozen values in this block are untouched.
Matches --font-family-mono now that JetBrains Mono is what actually loads by default.
|
Contributor
Author
|
Deciding against. |
This was referenced Jul 15, 2026
trevor-scheer
added a commit
that referenced
this pull request
Jul 15, 2026
…4428) ## Summary `tokens.css` declared `--font-family: 'Inter'` and `--font-family-mono: 'JetBrains Mono'`, but nothing in the app ever rendered in either. `root.css` redeclared both variables on `.graphiql-container`, pointing them back at Roboto and Fira Code, and that selector beats `:root` in the cascade. `packages/graphiql/src/style.css` only ever `@import`s the Roboto and Fira Code `@font-face` files, so Inter and JetBrains Mono weren't loaded to begin with — even if the cascade had gone the other way, the browser would have fallen through to the generic fallbacks. We decided in #4426 to keep Roboto and Fira Code rather than swap the type system, so this points the canonical declaration in `tokens.css` at the fonts that actually ship and drops the now-redundant `.graphiql-container` override. One declaration, and it matches what you see. No font loading changes. ## Test plan - [x] Open the app and inspect the query editor and any body text. Computed `font-family` resolves to Fira Code and Roboto respectively, same as before this change. - [x] In DevTools, confirm `--font-family` on `.graphiql-container` now inherits from `:root` rather than being overridden locally, and that its value is Roboto. - [x] Switch themes and density presets and confirm no type regressions anywhere in the app (top bar, status bar, doc explorer, history, response pane). Refs: #4219
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
1 participant
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.
Summary
tokens.cssalready declared--font-family: 'Inter'and--font-family-mono: 'JetBrains Mono', but nothing actually loaded those fonts, and a legacy block inroot.cssredeclared both vars with the old Roboto/Fira Code values and won the cascade. So the app had actually been rendering Roboto and Fira Code this whole time regardless of what the tokens said.font/inter.cssandfont/jetbrains-mono.css(base64, Latin + Latin Extended, regular and italic) load by default now, following the same pattern as the existingfont/roboto.css/font/fira-code.css. Roboto and Fira Code stay in the repo and stay importable for anyone who wants the v5 look.--font-family,--font-family-mono, and--font-size-bodyredeclarations fromroot.css's.graphiql-containerblock sotokens.cssactually wins. That also fixes a second bug:--font-size-bodywas pinned to a fixed 15px by the same shadowing, so the Settings > Font Size preset never touched body text. It scales correctly now.graphiql's builtstyle.css(710 KB → 875 KB) compared to today's Roboto + Fira Code. That's the cost of matching the handoff exactly; happy to trim further (e.g. drop italic, which is most of the added weight) if the size isn't worth it.Test plan
#comment and confirm it renders in italic in the editor.Refs: #4228