Font

Install and use the Glide font system used throughout Blode UI.

Font family

The default font family in Blode UI is "Glide", a variable font that supports weights from 100 (thin) to 950 (black) in both roman and italic styles. This versatile font is applied using Tailwind's font-sans utility class. The system also ships with "Glide Mono", a monospace companion applied with font-mono.

<p className="font-sans">This text uses the Glide font</p>
<p className="font-sans italic">This text uses Glide italic</p>
<code className="font-mono">This text uses Glide Mono</code>

Install Glide

Download the fonts

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

Configure the fonts in your root layout

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

import localFont from "next/font/local";
 
const glide = localFont({
  src: [
    { path: "../public/glide-variable.woff2", style: "normal" },
    { path: "../public/glide-variable-italic.woff2", style: "italic" },
  ],
  variable: "--font-glide",
  weight: "100 950",
  display: "swap",
});
 
const glideMono = localFont({
  src: [{ path: "../public/glide-mono.woff2", style: "normal" }],
  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>
  );
}

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:

@theme inline {
  --font-sans: var(--font-glide);
  --font-mono: var(--font-glide-mono);
}

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-medium">Medium text with Glide</p>
<code className="font-mono">const glide = "mono";</code>

Variable font

Glide is a variable font shipped as two files: regular and italic. Each contains all weights in a single file, allowing for precise typography with minimal file size impact. This technology enables smooth transitions between font weights and provides greater design flexibility.

Monospace

Glide Mono is the monospace companion to Glide, shipped as a single regular-weight file. It is applied with Tailwind's font-mono utility class and is ideal for code, tabular data, and anywhere fixed-width characters improve alignment.

Glide Mono