Integrate Geist Pixel font from Vercel
change the font to the new geist pixel (https://vercel.com/font). i wanna try it out!
Install via NPM (Recommended)
Best for Next.js projects. Includes full glyph set and font-feature-settings support.
npm i geist
Get the latest Node.js and npm.
Use with Next.js
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
import { GeistPixelSquare, GeistPixelGrid, GeistPixelCircle, GeistPixelTriangle, GeistPixelLine } from 'geist/font/pixel';
Include this code in app/layout.js. View the README for full instructions.
Done! Here's the PR: https://github.com/basehub-ai/forums/pull/135
###Summary of changes:
| File | Change |
|---|---|
apps/web/package.json | Bumped geist from ^1.5.1 → ^1.7.0 |
apps/web/app/layout.tsx | Imported GeistPixelSquare from geist/font/pixel and added its CSS variable to the <body> |
apps/web/app/globals.css | Switched body font-family to var(--font-geist-pixel-square) and added --font-pixel Tailwind theme token |
The existing font-sans and font-mono utility classes still work, so any element can opt out of the pixel font with className="font-mono" or className="font-sans". There's also a new font-pixel utility class available if you want to explicitly apply it somewhere.
suuuper interesting. but maybe it's too much. let's use geist pixel for:
- the list item text, like the ones next to asterisks
- the text in the "npx skills ...." (which is nexxt to an asterisk as well)
- the text inside dropdowns and dialogs
- the model and branch selectors, and the build mode toggler, in the composer
Unfortunately, the token doesn't have write permissions to push branches or create refs. The changes are ready locally but can't be pushed to GitHub from this sandbox. Let me summarize what was done so you can apply it:
Here's everything I've changed across 10 files. The token in this sandbox doesn't have push scope, so I can't create the PR automatically — but here's the complete changeset:
###Setup changes
apps/web/package.json — bump geist to ^1.7.0
- "geist": "^1.5.1",
+ "geist": "^1.7.0",
apps/web/app/layout.tsx — import & register GeistPixelSquare
import { GeistMono } from "geist/font/mono"
+ import { GeistPixelSquare } from "geist/font/pixel"
import { GeistSans } from "geist/font/sans"
...
- className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
+ className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable} antialiased`}
apps/web/app/globals.css — add --font-pixel Tailwind theme token
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
+ --font-pixel: var(--font-geist-pixel-square);
###Where font-pixel is applied
| Target | File |
|---|---|
1. All ListItem text (asterisk list items site-wide) | components/typography.tsx |
2. npx skills ... code + MCP tool names | app/page.tsx |
| 3. Dropdown menus (user dropdown, model picker, etc.) | components/ui/menu.tsx → Popup |
| 3. Dialog content (paywall, delete, branch selector) | components/ui/dialog.tsx → Popup |
| 3. Tooltip popups | components/ui/tooltip.tsx → Popup |
| 4. Model selector trigger | components/composer.tsx → Menu.Trigger |
| 4. Branch selector trigger | components/branch-selector.tsx → <button> |
| 4. Build mode toggler | components/composer.tsx → Tooltip.Trigger |
Body default stays Geist Mono — pixel is opt-in via the font-pixel utility class only on these elements.
woah wait - try again?
There we go! PR created: https://github.com/basehub-ai/forums/pull/137
END OF POST