Skip to content

Glide

Variable font family crafted for UI.

DownloadTry it

Playground

700

Glide variable font

The quick brown fox jumps over the lazy dog. 0123456789.

Weights

Regular400

The quick brown fox jumps over the lazy dog.

Medium500

The quick brown fox jumps over the lazy dog.

Semibold600

The quick brown fox jumps over the lazy dog.

Bold700

The quick brown fox jumps over the lazy dog.

Extrabold800

The quick brown fox jumps over the lazy dog.

Black900

The quick brown fox jumps over the lazy dog.

Install

1

Download the font files

Download glide-variable.woff2 and place them in your project's public/ directory.

2

Configure the font in your root layout

In app/layout.tsx, import localFont and configure the Glide variable font:

app/layout.tsx
import localFont from "next/font/local";

const glide = localFont({
  src: [
    { path: "../public/glide-variable.woff2", style: "normal" },
  ],
  variable: "--font-glide",
  weight: "400 900",
  display: "swap",
});

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

Map the CSS variable in Tailwind

In your global CSS file, map --font-glide to Tailwind's --font-sans so font-sans uses Glide:

app/globals.css
@theme inline {
  --font-sans: var(--font-glide);
}
4

Use it

Glide is now your default sans-serif font. Use font-sans with any weight from 400 to 900:

<p className="font-sans font-normal">Regular (400)</p>
<p className="font-sans font-bold">Bold (700)</p>
<p className="font-sans font-black">Black (900)</p>