Space Grotesk font

Space Grotesk is a Google Font sans-serif family, free for commercial use on Google Fonts. Works for product UI, marketing sites, and modern SaaS brand kits.

Sans serif · Google Fonts · Commercial free

Space Grotesk

Use in playground

Space Grotesk is a Google Font sans-serif family, free for commercial use on Google Fonts. Works for product UI, marketing sites, and modern SaaS brand kits.

Weight 400

The quick brown fox

Weight 500

The quick brown fox

Weight 600

The quick brown fox

Weight 700

The quick brown fox

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Display sample

Build your brand kit with Space Grotesk

Body sample

Use Space Grotesk in landing pages, dashboards, and DESIGN.md exports. Pair it with a complementary body font for readable paragraphs and UI labels.

Popular pairings

Space Grotesk + DM Sans

Embed code

Copy the snippet for your stack — same pattern as Google Fonts, ready for production sites and AI agent repos.

HTML link tag

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />

CSS @import

css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
  font-family: 'Space Grotesk', sans-serif;
}

CSS font-family

css

.font-space-grotesk {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
}

Next.js next/font/google

typescript

import { Space_Grotesk } from "next/font/google";

const font = Space_Grotesk({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-space-grotesk",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={font.variable}>
      <body>{children}</body>
    </html>
  );
}

Tailwind CSS

css

@import "tailwindcss";

@theme {
  --font-space-grotesk: 'Space Grotesk', sans-serif;
}

/* Usage: class="font-[family-name:var(--font-space-grotesk)]" */

DESIGN.md snippet

markdown

## Typography

- **Headline font:** Space Grotesk (Google Fonts)
- **CSS stack:** 'Space Grotesk', sans-serif
- **Weights:** 400;500;600;700

```html
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
```

Best for

UI dashboards
Marketing sites
App navigation
Body copy