Cormorant Garamond font

Cormorant Garamond is a Google Font serif family, free for commercial use on Google Fonts. Use it for editorial headlines, luxury landing pages, and readable long-form content.

Serif · Google Fonts · Commercial free

Cormorant Garamond

Use in playground

Cormorant Garamond is a Google Font serif family, free for commercial use on Google Fonts. Use it for editorial headlines, luxury landing pages, and readable long-form content.

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 Cormorant Garamond

Body sample

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

Popular pairings

Cormorant Garamond + Lato

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=Cormorant+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet" />

CSS @import

css

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

body {
  font-family: 'Cormorant Garamond', serif;
}

CSS font-family

css

.font-cormorant-garamond {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}

Next.js next/font/google

typescript

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

const font = Cormorant_Garamond({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-cormorant-garamond",
});

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-cormorant-garamond: 'Cormorant Garamond', serif;
}

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

DESIGN.md snippet

markdown

## Typography

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

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

Best for

Editorial layouts
Luxury brands
Long-form reading
Magazine headlines