How I Made the Same Font Look Way Better Without Changing the Font

#webdev #css #nextjs #design

Can you spot the difference between these two pieces of text?

They look different, right? But surprisingly, they're both using the same font.

I discovered this while working on my portfolio site and browsing for design inspiration. That’s when I stumbled upon Brittany Chiang’s portfolio.

Looks amazing, right?

I really liked the typography. So I inspected the font and was shocked to find that it was Inter — the same font I used on my site.

That left me wondering:

Why does this same font look so much better on her site than on mine?

I tried tweaking font weights and letter spacing, but something still felt off.

Then I noticed it — the letter "a" looked different.

🔍 The Mystery of the Letter "a"

Digging a bit deeper (and asking Google and some AI friends), I found the answer.

There are two types of lowercase "a" glyphs:

Double-storey "a" (left) — default, more traditional, great for print
Single-storey "a" (right) — simpler, more modern-looking

These are called glyphs — alternative shapes for the same character. Some fonts, like Inter, support multiple glyphs using OpenType features.

🛠️ How to Enable Single-Storey "a" in CSS

To change the glyph style in CSS, you can use the font-feature-settings property:

font-feature-settings: "ss07";

Since I was using Next.js with Tailwind CSS, I tried adding this in my globals.css:

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

But… it didn’t work.

Turns out, this was because I was importing the font via next/font/google, which doesn't always expose all glyph variations.

📦 Solution: Self-Host the Inter Font

So I decided to self-host the Inter font. Here’s how:

Download Inter from the official GitHub repository.
Place the font files inside your project: src/app/fonts.
Configure it using next/font/local in your layout.tsx:

import localFont from "next/font/local";

const inter = localFont({
  src: [
    { path: "./fonts/InterVariable.woff2", weight: "100 900", style: "normal" },
    {
      path: "./fonts/InterVariable-Italic.woff2",
      weight: "100 900",
      style: "italic",
    },
  ],
  variable: "--font-inter",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} antialiased`}>
      <body>{children}</body>
    </html>
  );
}

Then in your globals.css file:

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

And guess what? It worked! 🙌

Now the letter "a" shows in the single-storey style — just like Brittany’s site.

🧠 Takeaway

Fonts like Inter offer multiple glyph variations (like different styles of the same character).
Use the font-feature-settings CSS property to customize glyphs.
If you're using a third-party font service (like Google Fonts via next/font/google), some OpenType features might not be available.
Self-hosting the font gives you more control.