# Geist

Geist is Vercel’s typeface for developers and designers. The family combines readability, precision, and a restrained visual style inspired by Swiss design.

Use the [interactive Geist font page](https://vercel.com/font) to preview characters, weights, features, and styles.

## Font families

| Family      | Styles     | Glyphs | Stylistic sets | Languages |
| ----------- | ---------- | -----: | -------------: | --------: |
| Geist Sans  | 9 weights  |    652 |              9 |        32 |
| Geist Mono  | 9 weights  |    669 |              9 |        32 |
| Geist Pixel | 5 variants |    480 |              7 |        32 |

Geist Sans is designed for interfaces and body copy. Geist Mono prioritizes readability in code and tabular content. Geist Pixel includes Square, Grid, Circle, Triangle, and Line variants for display text.

## Install Geist from npm

Install the [`geist` package](https://www.npmjs.com/package/geist):

```bash
npm i geist
```

### Use Geist with the Next.js App Router

Import the fonts in `app/layout.js`. Every export is a Next.js font object with `className` and `variable` properties.

```jsx
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
import {
  GeistPixelSquare,
  GeistPixelGrid,
  GeistPixelCircle,
  GeistPixelTriangle,
  GeistPixelLine,
} from 'geist/font/pixel';

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}
```

Use the exported CSS variables in your styles:

- Geist Sans: `--font-geist-sans`
- Geist Mono: `--font-geist-mono`
- Geist Pixel Square: `--font-geist-pixel-square`
- Geist Pixel Grid: `--font-geist-pixel-grid`
- Geist Pixel Circle: `--font-geist-pixel-circle`
- Geist Pixel Triangle: `--font-geist-pixel-triangle`
- Geist Pixel Line: `--font-geist-pixel-line`

## Use Geist from Google Fonts

Next.js provides Geist Sans, Geist Mono, and Geist Pixel through `next/font/google`:

```tsx
import { Geist, Geist_Mono, Geist_Pixel } from 'next/font/google';
```

Geist Pixel uses the `ELSH` variable axis. Keep the axis when loading the font:

```tsx
import { Geist_Pixel } from 'next/font/google';

export const geistPixel = Geist_Pixel({
  subsets: ['latin'],
  axes: ['ELSH'],
  variable: '--font-geist-pixel',
  display: 'swap',
});
```

Set `ELSH` to select a Pixel variant:

| Variant  | `ELSH` value |
| -------- | -----------: |
| Square   |            1 |
| Circle   |           20 |
| Grid     |           40 |
| Triangle |           60 |
| Line     |           80 |

## Download font files

[Download the latest Geist release from GitHub](https://github.com/vercel/geist-font/releases/latest) for OTF, WOFF2, and variable font files.

## License

Geist is licensed under the [SIL Open Font License 1.1](https://github.com/vercel/geist-font/blob/main/LICENSE.txt). You can use, modify, and redistribute the font under the terms of that license.