Inter var but not actually Inter var? #10909

geoffreymcgill · 2023-03-30T04:44:49Z

geoffreymcgill
Mar 30, 2023

The font used on tailwindcss.com/docs is Inter var.

But it appears to be a different font than what is available on the actual Inter var website (rsms.me/inter).

Notice the difference in the a glyph.

I must be missing something completely obvious here, but why is a different a glyph used on the tailwind.css/docs site vs rsms.me/inter? I'm sure other characters are different too, just the a is an obvious one.

Answered by adamwathan

Mar 30, 2023

We set font-feature-settings: "cv11" to enable the single story a alternate glyph:

https://rsms.me/inter/lab/?feat-cv11=1

Inter includes lots of alternate styles like this that you can access as OpenType font features 👍

View full answer

geoffreymcgill · 2023-03-30T04:57:41Z

geoffreymcgill
Mar 30, 2023
Author

I can download the actual Inter-roman-latin.var.18496762.woff2 from the tailwindcss.com/docs website and use font file my project, and I get the a glyph as spec'd on the rsms.me/inter website.

So, I'm at a loss as to what font is actually being used on the tailwindcss.com/docs website or what is causing unique glyphs, such as the a.

Any help is greatly appreciated.

0 replies

adamwathan · 2023-03-30T05:21:18Z

adamwathan
Mar 30, 2023
Maintainer

We set font-feature-settings: "cv11" to enable the single story a alternate glyph:

https://rsms.me/inter/lab/?feat-cv11=1

Inter includes lots of alternate styles like this that you can access as OpenType font features 👍

8 replies

rruslianto14 May 5, 2024

@wongjn thanks for your reply. I have tried both and still can't get the 'cv11' version of the 'a' character to render correctly. I am using the Inter font from Google and next/font so not sure if I need to do something else? Appreciate your help in advance!

layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

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

page.tsx

export default function Home() {
  return (
    <>
      <header>
        <div>
          <p>a test</p>
        </div>
      </header>
    </>
  );
}

tailwind.config.ts

import type { Config } from "tailwindcss";
const defaultTheme = require("tailwindcss/defaultTheme");

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "var(--font-inter)",
          {
            fontFeatureSettings: '"cv11"',
            fontVariationSettings: "normal",
          },
        ],
      },
    },
  },
  plugins: [],
};
export default config;

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  height: 100%;
  font-feature-settings: 'cv11';
}

wongjn May 5, 2024
Collaborator

You seem to be using Google Font's version of the Inter font. If we look up the axes that Google Font's Inter supports, we see only slnt and wght for slant and weight respectively. To support cv11, you could consider downloading from the author's site, which supports more axes, including cv11 for the alternative a glyph. See this StackBlitz project that compares the two different font files.

rruslianto14 May 6, 2024

Thanks again for taking the time to explain and create the StackBlitz project @wongjn!

I think I get it but just had a follow up question now; how can we use the local font to render the double-storey 'a' that is used in the Google font?

In your StackBltiz project, I have commented out/removed the following in the tailwind.config.ts fontFeatureSettings: '"cv11" and fontVariationSettings: 'normal' for the local font and also the font-feature-settings: 'cv11'; in the global.css file, however, I see that the local font is still rendering the single-storey 'a'?

If my understanding is correct, shouldn't the local font now render the double-storey 'a' (same as the Google font one) as we have removed and haven't specified to use 'cv11'?

Thanks again in advance.

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'var(--font-inter-google)',
          {
            fontFeatureSettings: '"cv11"',
            fontVariationSettings: 'normal',
          },
        ],
        local: [
          'var(--font-inter-local)',
          // {
          //   fontFeatureSettings: '"cv11"',
          //   fontVariationSettings: "normal",
          // },
        ],
      },
    },
  },
  plugins: [],
};
export default config;

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  height: 100%;
  /* font-feature-settings: 'cv11'; */
}

wongjn May 6, 2024
Collaborator

The styles from font-sans gets applied to the <html> element from preflight:

tailwindcss/src/css/preflight.css

Lines 36 to 38 in f1f419a

    
           font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ 
        
           font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ 
        
           font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */

Thus, even commenting out fontFeatureSettings: '"cv11"' from fontFamily.local, the <div> still inherits font-feature-settings: "cv11" from the html parent. To demonstrate this, here is the same project with cv11 removed for fontFamily.local and preflight disabled and observe that the a characters are now the same style.

rruslianto14 May 6, 2024

@wongjn great! Thanks for taking the time to explain it, made a lot of sense and learned something new! Cheers!

braianorl · 2024-04-10T03:54:23Z

braianorl
Apr 10, 2024

Is it possible to use this font on my Figma file? I tried download the Inter var but only the Italic came with the cv11

1 reply

braianorl May 5, 2024

I just found a solution for using on both figma and bubble.io: I download the InterVariable from the author's website. And then I download a software to freeze a specific feature of the opentype. That way I had exported a frozen Intervariable with the specific characteristics I like and could use both on bubble and figma

rickyzhangca · 2024-07-08T15:23:04Z

rickyzhangca
Jul 8, 2024

the easiest/fastest way is probably:

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

/* CSS */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; 'cv11': 1;
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

2 replies

developerdavid2 Dec 19, 2024

Thanks, this really did work for me. I was having conflicting issues using PrimeReact with Tailwindcss especially as regards using the inter font and this simple solution solved it.

bxavace Jan 14, 2025

Thanks! This fixed the weird font issues on my Angular 17 app with PrimeNG 17 and Tailwind 3.4.13. I thought I was the only one finding that weird change in the glyph!

Sbrjt · 2025-06-21T16:23:03Z

Sbrjt
Jun 21, 2025

tldr:

Download it from here. Google fonts lacks cv11.

In layout.tsx:

const inter = localFont({
    src: [
        {
            path: '../../public/fonts/InterVariable.woff2',
            weight: '100 900',
            style: 'normal',
        },
        // ... also for italic (no need for static fonts, we only need InterVariable)
    ],
    variable: '--font-inter',
})

function RootLayout({ children }) {
return (
	<html lang='en'>
		<body className={inter.variable}>
		     ....

In global.css:

// use this class for inter
.font-inter {
    font-family: var(--font-inter);
    font-feature-settings: 'cv11' 1;
}

0 replies

Uh oh!

Inter var but not actually Inter var? #10909

Uh oh!

Uh oh!

Replies: 5 comments · 11 replies

Uh oh!

geoffreymcgill Mar 30, 2023 Author

Uh oh!

adamwathan Mar 30, 2023 Maintainer

Uh oh!

Uh oh!

Uh oh!

wongjn May 5, 2024 Collaborator

Uh oh!

Uh oh!

wongjn May 6, 2024 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 11 replies

geoffreymcgill
Mar 30, 2023
Author

adamwathan
Mar 30, 2023
Maintainer

wongjn May 5, 2024
Collaborator

wongjn May 6, 2024
Collaborator