Glide is a variable sans-serif typeface by Matthew Blode, supporting weights from 400 (regular) to 900 (black) in both roman and italic styles.
The default font family in Blode UI is "Glide". This versatile variable font is applied using Tailwind's font-sans utility class.
<p className="font-sans">This text uses the Glide font</p>
<p className="font-sans italic">This text uses Glide italic</p>Download glide-variable.woff2 and glide-variable-italic.woff2 and place them in your project's public/ directory.
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", style: "normal" },
{ path: "../public/glide-variable-italic.woff2", style: "italic" },
],
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>
);
}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);
}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>Glide is shipped as two variable font files: regular and italic. Each contains all weights in a single file, allowing for precise typography with minimal file size impact.
| Weight | Name | Class |
|---|---|---|
| 400 | Regular | font-normal |
| 500 | Medium | font-medium |
| 600 | Semibold | font-semibold |
| 700 | Bold | font-bold |
| 800 | Extrabold | font-extrabold |
| 900 | Black | font-black |
// Roman
<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>- Family: Glide
- Designer: Matthew Blode
- Styles: Roman + Italic (separate variable fonts)
- Weight range: 400–900 (variable
wghtaxis) - Formats: Variable TTF, WOFF2, WOFF — Static TTF, OTF, WOFF2, WOFF
- Named instances: Regular (400), Medium (500), Bold (700), Black (900)
glide-variable.glyphs/glide-variable-italic.glyphs: Glyphs source filesfonts/: built font files (variable + static) andglide.cssmetadata/: release and verification metadataapps/web/: Next.js proof and documentation site
Copyright Matthew Blode. All rights reserved.