Blode UI
GitHub

Font

PreviousNext

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 400 (regular) to 900 (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: "400 900",
  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 400 to 900, 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

The quick brown fox jumps over the lazy dog.

const glide = "mono";

Font weights

Explore how Glide looks at different font weights:

Font weight: 400 (Regular)

The quick brown fox jumps over the lazy dog.

Font weight: 500 (Medium)

The quick brown fox jumps over the lazy dog.

Font weight: 600 (Semibold)

The quick brown fox jumps over the lazy dog.

Font weight: 700 (Bold)

The quick brown fox jumps over the lazy dog.

Font weight: 800 (Extrabold)

The quick brown fox jumps over the lazy dog.

Font weight: 900 (Black)

The quick brown fox jumps over the lazy dog.

Heading elements

Blode UI provides consistent styling for all heading levels:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text

The default paragraph text uses the Glide font at weight 400 (regular):

This is a standard paragraph with the Glide font. The font provides excellent readability at various sizes while maintaining a modern, clean aesthetic. The variable font technology ensures that characters remain crisp and balanced across different weights and sizes.

This is a smaller paragraph showing how Glide performs at reduced sizes. Even at smaller sizes, the font maintains its legibility and character.

Usage in Tailwind

Blode UI has configured Tailwind CSS to use Glide as the default sans-serif font. You can apply it using the font-sans utility class:

// Examples of using font-sans with different weights
<p className="font-sans font-normal">Regular text (400)</p>
<p className="font-sans font-medium">Medium text (500)</p>
<p className="font-sans font-semibold">Semibold text (600)</p>
<p className="font-sans font-bold">Bold text (700)</p>
<p className="font-sans font-extrabold">Extra Bold text (800)</p>
<p className="font-sans font-black">Black text (900)</p>
 
// Italic variants
<p className="font-sans italic">Regular italic (400)</p>
<p className="font-sans font-bold italic">Bold italic (700)</p>

Technical details

Glide is loaded as a variable font using Next.js's localFont utility, with Glide Mono loaded as a static monospace face. This ensures optimal performance by:

  • Loading the fonts locally rather than from an external CDN
  • Utilizing the variable font format to reduce file size
  • Enabling the full range of weights (400-900) in two files (regular and italic), plus a single Glide Mono file

The fonts are applied site-wide via CSS variables (font-sans and font-mono), making them consistent across all components and pages.