Glide
A variable sans-serif typeface supporting weights from 400 to 900 in both roman and italic styles.
Glide variable font
The quick brown fox jumps over the lazy dog. 0123456789.
Glide variable font
The quick brown fox jumps over the lazy dog. 0123456789.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Download the font files
Download glide-variable.woff2 and glide-variable-italic.woff2 and place them 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", 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>
);
}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-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>