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

Thin100

The quick brown fox jumps over the lazy dog.

ExtraLight200

The quick brown fox jumps over the lazy dog.

Light300

The quick brown fox jumps over the lazy dog.

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.

Extra Black950

The quick brown fox jumps over the lazy dog.

Only three of these are drawn: Thin, Regular, and Extra Black. The rest are interpolated. Open the interpolation inspector to see where the shapes drift in between.

Install

For Figma and Font Book, download Glide for desktop (TTF).

1

Download the font files

Download glide-variable.woff2 and glide-variable-italic.woff2 and glide-mono.woff2 and put them in app/fonts/ next to your root layout.

2

Configure the fonts in your root layout

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

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

const glide = localFont({
  src: [
    { path: "./fonts/glide-variable.woff2", style: "normal" },
    { path: "./fonts/glide-variable-italic.woff2", style: "italic" },
  ],
  variable: "--font-glide",
  weight: "100 950",
  display: "swap",
});

const glideMono = localFont({
  src: "./fonts/glide-mono.woff2",
  variable: "--font-glide-mono",
  weight: "400",
  display: "swap",
});

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

Map the CSS variables in Tailwind

In your global CSS file, map --font-glide to Tailwind's --font-sans and --font-glide-mono to --font-mono:

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

Use it

Glide is now your default sans-serif font, and Glide Mono is your monospace font. Use font-sans with any weight from 100 to 950, and font-mono for code:

<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>
<p className="font-sans font-bold italic">Bold italic (700)</p>
<code className="font-mono">const glide = "mono";</code>