Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
npm install geist
Geist is a new font family created by Vercel in collaboration with Basement Studio.
Geist Sans is a sans-serif typeface designed for legibility and simplicity. It is modern, geometric, and based on the principles of classic Swiss typography. It is designed to be used in body copy, headlines, logos, posters, and other large display sizes.
Geist Mono is a monospaced typeface, crafted to be the perfect partner to Geist Sans. It is designed to be used in code editors, diagrams, terminals, and other text-based interfaces where code is rendered.
Geist Pixel is a display typeface family featuring five unique pixel-based variants, each with a distinct visual style. It is designed for decorative use in headlines, logos, and other display contexts where a pixelated aesthetic is desired.
``sh`
npm install geist
GeistSans is exported from geist/font/sans, GeistMono can be found in geist/font/mono, and Geist Pixel variants are available from geist/font/pixel. All are NextFontWithVariable instances. You can learn more by reading the next/font docs.
#### Geist Pixel Variants
Geist Pixel includes five distinct variants, each exported separately:
| Export | CSS Variable | Description |
| -------------------- | ----------------------------- | ------------------------ |
| GeistPixelSquare | --font-geist-pixel-square | Square pixel shapes |GeistPixelGrid
| | --font-geist-pixel-grid | Grid-based pixel pattern |GeistPixelCircle
| | --font-geist-pixel-circle | Circular pixel shapes |GeistPixelTriangle
| | --font-geist-pixel-triangle | Triangular pixel shapes |GeistPixelLine
| | --font-geist-pixel-line | Line-based pixel pattern |
`jsx`
import {
GeistPixelSquare,
GeistPixelGrid,
GeistPixelCircle,
GeistPixelTriangle,
GeistPixelLine,
} from "geist/font/pixel";
#### App Router
In app/layout.js:
`jsx
import { GeistSans } from "geist/font/sans";
export default function RootLayout({ children }) {
return (
#### Pages Router
In
:`jsx
import { GeistSans } from "geist/font/sans";export default function MyApp({ Component, pageProps }) {
return (
);
}
`If you're using a version of Next.js that's older than 15, then in
or next.config.mjs add:`diff js
/* @type {import('next').NextConfig} /
const nextConfig = {
reactStrictMode: true,
+ transpilePackages: ["geist"],
};export default nextConfig;
`This is required to fix errors like:
-
- #### With Tailwind CSS
All Geist fonts can be used through CSS variables.
-
: --font-geist-sans
- : --font-geist-mono
- : --font-geist-pixel-square
- : --font-geist-pixel-grid
- : --font-geist-pixel-circle
- : --font-geist-pixel-triangle
- : --font-geist-pixel-lineIn
:`jsx
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { GeistPixelSquare } from "geist/font/pixel";export default function RootLayout({ children }) {
return (
className={
${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}}
>
{children}