Spinning the Font Wheel

Every now and then, you stumble upon a simple idea that adds a surprising amount of character to a web project. Recently, O. Wolfson shared exactly that kind of gem on their blog: a method for creating a hero title that uses a different font on each page load.

You can check out their original article, "A Random Hero Title Font Selector Component in Next.js," right here: Random Font Hero Title

The core concept? Injecting a bit of controlled unpredictability into the design by randomly selecting a font for the main heading from a predefined collection. It's a fantastic way to make a site feel more dynamic and alive without complex animations or heavy scripts. As O. Wolfson points out, it adds variety and personality with minimal fuss.

The Elegance of Simplicity

What I particularly appreciate about the approach O. Wolfson detailed is its straightforward implementation within a modern Next.js environment:

• Leveraging next/font/local: They start by importing custom fonts (like Endless) via Next.js's built-in localFont utility. This is great because Next.js optimizes these fonts, handles fallback fonts, and minimizes layout shifts. Each font is assigned a CSS variable.
• Client-Side Randomization with useMemo: Inside a React component (marked with "use client"), the useMemo hook is used. This hook calculates a random index once when the component first renders on the client-side and selects the corresponding font object from the list. This ensures the font remains consistent during the user's interaction with that specific page instance but differs across different page loads or visits.
• Applying the Font: The chosen font's className (automatically generated by next/font) is then applied directly to the element, along with other styling.

The result is refreshingly lightweight. No complex state management, no fetching libraries – just clever use of built-in Next.js features and React hooks.

Why This Works So Well

This approach offers several benefits:

• Subtle Surprise: It provides a fresh look on each visit without being jarring.
• Showcasing Typography: It's an excellent way to demonstrate a range of brand fonts or simply experiment with different typographic styles.
• Developer Experience: The next/font integration makes handling custom fonts significantly easier than traditional CSS @font-face setups.

Props to oWolf

Big kudos again to O. Wolfson for sharing this technique. You should definitely check out their other work and insights over at owolf.com.

Final Thoughts

This random font selector is a perfect example of how small, thoughtful touches can significantly impact user experience and design personality. I encourage you to check out O. Wolfson's original post for the full code and explanation!