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). This versatile font is applied using Tailwind's font-sans utility class.

<p className="font-sans">This text uses the Glide font</p>

Install Glide

Download the font

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

Configure the font in your root layout

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

import localFont from "next/font/local";
 
const glide = localFont({
  src: [{ path: "../public/glide-variable.woff2" }],
  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>
  );
}

Map the CSS variable in Tailwind

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

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

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-medium">Medium text with Glide</p>

Variable font

Glide is a variable font, which means it 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.

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>

Technical details

Glide is loaded as a variable font using Next.js's localFont utility. This ensures optimal performance by:

  • Loading the font 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 a single file

The font is applied site-wide via CSS variables, making it consistent across all components and pages.