DOCSEARCHbyAlgolia
Submit Docs

Geist Font Family

repository·main·Indexed 26 days ago

https://github.com/vercel/geist-font

Geist is a font family created by Vercel in collaboration with Basement Studio, optimized for modern web interfaces and developer tools. It includes Geist Sans, Geist Mono, and Geist Pixel. The documentation covers installation via npm, integration with Next.js (App and Pages Router), configuration with Tailwind CSS V3 and V4, and technical guidance for manual font building and validation using FontSpector.

Tokens
30.2K
Snippets
56
Records
253
Agent score
85%

What's inside geist

  2. Configure Geist fonts with Tailwind CSS V3

    main

    To use Geist fonts with Tailwind CSS V3, inject the font variables into your layout using the .variable property, then extend the fontFamily in your tailwind.config.js.

    // In app/layout.js
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { GeistPixelSquare } from "geist/font/pixel";

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

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist-sans)"],
        mono: ["var(--font-geist-mono)"],
        "pixel-square": ["var(--font-geist-pixel-square)"],
        "pixel-grid": ["var(--font-geist-pixel-grid)"],
        "pixel-circle": ["var(--font-geist-pixel-circle)"],
        "pixel-triangle": ["var(--font-geist-pixel-triangle)"],
        "pixel-line": ["var(--font-geist-pixel-line)"],
      },
    },
  },
};

  3. Use Geist fonts with Next.js App Router

    main

    To use Geist Sans in the Next.js App Router, import GeistSans from geist/font/sans and apply its className to the <html> or <body> tag in your app/layout.js file.

    import { GeistSans } from "geist/font/sans";

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

  4. Use Geist fonts with Next.js Pages Router

    main

    To use Geist Sans in the Next.js Pages Router, import GeistSans from geist/font/sans and apply its className to a wrapper element (like <main>) in your pages/_app.js file.

    import { GeistSans } from "geist/font/sans";

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={GeistSans.className}>
      <Component {...pageProps} />
    </main>
  );
}

  5. Build Geist fonts manually

    main

    If you need to build the font files locally, you can use the provided Makefile commands:

    • make build: Produces the font files.
    • make test: Runs quality assurance tests using Fontspector.
    • make proof: Generates HTML proof files.
    make build
make test
make proof

  7. Configure Geist fonts with Tailwind CSS V4

    main

    To use Geist fonts with Tailwind CSS V4, first inject the font variables into your layout using the .variable property, then map them in your tailwind.css file using the @theme block.

    // In app/layout.js
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { GeistPixelSquare } from "geist/font/pixel";

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

// In tailwind.css
@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-pixel-square: var(--font-geist-pixel-square);
  --font-pixel-grid: var(--font-geist-pixel-grid);
  --font-pixel-circle: var(--font-geist-pixel-circle);
  --font-pixel-triangle: var(--font-geist-pixel-triangle);
  --font-pixel-line: var(--font-geist-pixel-line);
}

  9. Interpret FontSpector report results

    main

    A FontSpector report provides detailed geometric analysis of glyph components (Lines and Quads) to identify potential issues in font construction.

    Each entry in the report follows this pattern: * [glyph_name] ([unicode]): [component_1]/[component_2] = [ratio]

    • Glyph Name/Unicode: The specific character or OpenType feature (e.g., a (U+0061), a.ss02, g.ss05) being analyzed.
    • Components: The report shows the relationship between two geometric primitives, such as Line or Quad(QuadBez { ... }). The coordinates p0, p1, and p2 define the points of the Bezier curves or lines.
    • Ratio: The numerical value at the end of the line represents the calculated ratio between the two components.

    Checks with FATAL results: These indicate critical geometric inconsistencies that must be addressed. All other checks: These represent non-fatal findings or standard geometric data.