Bebas Neue font

Bebas Neue is a Google Font display family, free for commercial use on Google Fonts. Ideal for bold hero headlines, posters, and high-impact marketing sections.

Display · Google Fonts · Commercial free

Bebas Neue

Use in playground

Bebas Neue is a Google Font display family, free for commercial use on Google Fonts. Ideal for bold hero headlines, posters, and high-impact marketing sections.

Weight 400

The quick brown fox

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Display sample

Build your brand kit with Bebas Neue

Body sample

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

Popular pairings

Bebas Neue + Roboto

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=Bebas+Neue:wght@400&display=swap" rel="stylesheet" />

CSS @import

css

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&display=swap');

body {
  font-family: 'Bebas Neue', sans-serif;
}

CSS font-family

css

.font-bebas-neue {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
}

Next.js next/font/google

typescript

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

const font = Bebas_Neue({
  subsets: ["latin"],
  weight: ["400"],
  variable: "--font-bebas-neue",
});

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-bebas-neue: 'Bebas Neue', sans-serif;
}

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

DESIGN.md snippet

markdown

## Typography

- **Headline font:** Bebas Neue (Google Fonts)
- **CSS stack:** 'Bebas Neue', sans-serif
- **Weights:** 400

```html
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&display=swap" rel="stylesheet" />
```

Best for

Hero headlines
Posters
Sports brands
Bold CTAs